Item Transition Inspiration with jQuery

Ernest Marcinko jQuery, Tutorials 17 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="https://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

Comments 17

    1. Ernest Marcinko Post
      Author
    1. Ernest Marcinko 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
    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. Ernest Marcinko 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
    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+.

  3. Brian Johnson

    Saved my butt today! I was trying to figure out how to actually DO those transitions, because the original site really didn’t explain how to pull it off at all and I’m clueless on JS. Nice write-up.

  4. Brian Johnson

    I’ve gotten the plugin working on my site, but like others, I am having trouble making it auto-play. The original demo from Tympanus did not auto-play either, but a commentor found that adding this code:

    setInterval(function(){
    animationStart(‘next’);
    },100);

    After this line in their main.js

    line navPrev.addEventListener( ‘click’, function( ev ) { ev.preventDefault(); navigate( ‘prev’ ); } );

    Would do the trick. Unfortunately, their code is totally different from yours. I’m having trouble figuring out what function names to use to actually get it to work! Any advice on how to get it to go on its own?

    1. Brian Johnson

      Figured it out finally! I just set a function that would simulate a click of the “next” button every 5 seconds. Is it the best way to do things? Probably not. But it works!

      I just put this script by itself on the page directly. I’m sure it would work anywhere though.

      window.setInterval(function(){
      jQuery(“.next”).click()
      }, 5000);

      1. Ernest Marcinko Post
        Author

Leave a Reply to Theodore L. Cancel reply

Your email address will not be published.