transition4

Item Transition Inspiration with jQuery

Ernest Marcinko jQuery, Tutorials 12 Comments

Have you seen Mary Lous latest work on codrops, the Inspiration for item transitions? If not, you should check it out first, she does an amazing work as always.

Some of you however might find it a bit hard to integrate into your projects, as there is a huge base of developers using jQuery mostly. I have transformed her work into a jQuery plugin, to make your work faster.

Additions & Improvements

  • Only dependant on jQuery
  • Multiple instances on the same page
  • Handles callbacks
  • The animation select field is optional

Implementation

4 CSS files are included from the original work, you should all of them to the site head first:

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<link rel="stylesheet" type="text/css" href="css/fxsmall.css" />
<link rel="stylesheet" type="text/css" href="css/fxfullwidth.css" />

Make sure, that you have the correct path in the href attribute. There is also a fonts and images folder, you might also want to copy those into your project.

The HTML Structure

Lets look at the code from the full-width example:

<section id='itemtransitions_1'>
	<div class="component component-fullwidth">
		<ul class="itemwrap">
			<li class="current"><img src="img/6.jpg" alt="img06"/></li>
			<li><img src="img/7.jpg" alt="img07"/></li>
			<li><img src="img/8.jpg" alt="img08"/></li>
		</ul>
		<nav>
			<a class="prev" href="#">Previous item</a>
			<a class="next" href="#">Next item</a>
		</nav>
	</div>
</section>

The first element doesn’t have to be a section, you can use a div as well. You can also place multiple instances of the plugin on the same page. You can change the navigation as well, because the next/prev button classes are defined in the javascript declaration.

Javascript

First of all, you need to include a jQuery and the plugin itself in your site header (or footer).

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/jquery.itemtransitions.js"></script>

Great. Now the plugin declaration looks like this (this goes to the header/footer as well):

jQuery(document).ready(function() {
  jQuery('#itemtransitions_1').itemtransitions({
    componentSel : '.component',
    itemsSel     : 'ul.itemwrap li',
    prevClass : 'prev',
    nextClass : 'next',
    animation : 'fxSoftScale',
    selectName : 'fxselect',
    animationStart : function(event, node, direction) {
       console.log(event, node,direction);
    },
    animationEnd : function(event, node, direction) {
       console.log(event, node,direction);
    }
  });
});

All of these configuration variables are optional, the plugin will work fine without them. A little explanation though:

  • componentSel – the selector for the component element – this contains the navigation and the elements container
  • itemSel – the item selector, relative to the transitions container
  • prevClass – the class of the previous button
  • nextClass – the class of the next button
  • animation – the name of the default animation, you can find the full list in the source code or in the fxsmall.css and the fxfullwidth.css file.
  • selectName – if you want to use an animation selector, then here goes the name of  it. If there is no selector found, then the default animation will be used.

There are also two callback methods:

  • animationStart – fires when the user clicks the prev/next button
  • animationEnd – fires when the animation is completed

The three paramaters are the event, the container node and the direction of the button pressed (prev, next).

Grab the code

DemoDownload

Related Posts
Filter by
Post Page
Tutorials jQuery Blog Free Plugins Wordpress Commercial Plugins Wordpress Design plugin update ajax box search
Sort by

jQuery element rotation plugin

In my previous project I needed to rotate some elements, but I hadn't found any jQuery plugins regarding this issue.
2012-10-16 18:50:00
admin

18

Related posts lite - free plugin

2014-08-08 09:10:54
admin

8

Related Posts Pro for WordPress

2014-07-04 14:07:19
admin

8

Using Ajax in your WordPress plugins

2014-04-14 13:23:29
admin

8

Maximum performance with WordPress

2014-03-24 18:26:32
admin

8

WordPress ping list for 2014

2014-03-20 14:19:25
admin

8

How to set up W3 Total cache with MaxCDN

2014-03-20 13:15:00
admin

8

WordPress - Widget select box

2014-03-18 09:40:58
admin

8

Contact form 7 Gmail spam fix

2014-03-17 16:25:25
admin

8

Ajax Search Pro for WordPress v2.4

2012-11-06 19:27:10
admin

8

Polaroid Slider for WordPress

2012-10-09 18:26:50
admin

8

Like this plugin?

2014-07-01 00:00:00
anago

999

Ernest Marcinko

WordPress developer, javascript enthusiast, photoshop clicker and the founder of wp-dreams.com

Latest posts by Ernest Marcinko (see all)

Comments 12

    1. Post
      Author
    1. Post
      Author
      Ernest Marcinko

      To make it work with smaller images, you will need some basic CSS and javascript knowledge.
      You should first locate the item wrapper width and height in the CSS code, then change it to your needs. The items are set to 100% width and height by default, so it should work after the modification.

  1. OSWS

    Very nice.  Thanks for the JQuery implementation, Ernest.  I’m a big fan of Codrops and saw this article.  Having originally implemented a simple on-hover javascript effect into my site this is much nicer, albeit with more code and with better cross browser support. I haven’t check in in IE9 yet so would be interested in any suggestions for older IE browsers.

    One thing I do find in practice with transitions is that some are far more palatable for general use.  The Soft Scale works well as an alternate to the ubiquitous sidewards slide-in use in many sliders.

    1. Post
      Author
      Ernest Marcinko

      Hi!

      IE9 right now feels like when IE7-8 felt a few years befor – a pain in the ass. The only workaround I see here is some kind of alternative fallback, because implementing these effects to IE9 is possible with javascript, however not worth the time at all.

      I would recommend to use a different solution when IE9 is detected, like the slick slider. The implementation is very similar to this, so I think it is possible to create a bridge – with basic if(ie9) then slick else itemtransitions logic – between the item transitions and the slick slider without modifying the plugins.

  2. OSWS

    Thanks!  I kind of agree.  Catering for older versions is a pain. There’s no reason for people / corporations to stick with outdated browsers. The only reason it happens is because IT depts. can’t get past the sign-off phase to upgrade to newer versions of IE.

    I see the Slick Slider uses lazy loading. The whole question of adaptive images (adaptive-images.com/), or rather catering for low bandwidth is an area that really needs more attention/implementation by everybody developing sites in 2014+.

Leave a Reply

Your email address will not be published. Required fields are marked *


4 + = 10