Original Codrops article Back to the WPDreams Article

Item Transition Inspiration with jQuery

Instance #1

This example uses ul/li elements.

Script

jQuery(document).ready(function() {
  jQuery('#itemtransitions_1').itemtransitions({
    prevClass : 'prev',
    nextClass : 'next',
    animation : 'fxCorner',
    selectName : 'fxselect1',
    animationStart : function(event, node, direction) {
       console.log(event, node,direction);
    },
    animationEnd : function(event, node, direction) {
       console.log(event, node,direction);
    }
  });
});
          

Instance #2

img01

Morbi urna

Lorem ipsum dolor sit amet consectetuer Nam rhoncus elit Maecenas et. Tempor congue ante tincidunt malesuada felis mi fermentum Morbi urna Curabitur.

Ornare venenatis lacinia In nibh pede tempus lorem urna id orci. Quis id sagittis vitae semper lorem vestibulum purus eget Nullam Fusce. Parturient quis vitae Phasellus cursus porttitor Vestibulum Cum tempus porttitor porta. Dolor nibh nec hendrerit velit Pellentesque volutpat sagittis pulvinar eu urna. Convallis hendrerit sem tincidunt Pellentesque senectus ligula Nullam gravida Nam velit. A accumsan.

Ornare venenatis lacinia In nibh pede tempus lorem urna id orci. Quis id sagittis vitae semper lorem vestibulum purus eget Nullam Fusce. Parturient quis vitae Phasellus cursus porttitor Vestibulum Cum tempus porttitor porta. Dolor nibh nec hendrerit velit Pellentesque volutpat sagittis pulvinar eu urna. Convallis hendrerit sem tincidunt Pellentesque senectus ligula Nullam gravida Nam velit. A accumsan.

img02

Lorem ipsum

Lorem ipsum dolor sit amet consectetuer Nam rhoncus elit Maecenas et. Tempor congue ante tincidunt malesuada felis mi fermentum Morbi urna Curabitur.

Ornare venenatis lacinia In nibh pede tempus lorem urna id orci. Quis id sagittis vitae semper lorem vestibulum purus eget Nullam Fusce. Parturient quis vitae Phasellus cursus porttitor Vestibulum Cum tempus porttitor porta. Dolor nibh nec hendrerit velit Pellentesque volutpat sagittis pulvinar eu urna. Convallis hendrerit sem tincidunt Pellentesque senectus ligula Nullam gravida Nam velit. A accumsan.

Ornare venenatis lacinia In nibh pede tempus lorem urna id orci. Quis id sagittis vitae semper lorem vestibulum purus eget Nullam Fusce. Parturient quis vitae Phasellus cursus porttitor Vestibulum Cum tempus porttitor porta. Dolor nibh nec hendrerit velit Pellentesque volutpat sagittis pulvinar eu urna. Convallis hendrerit sem tincidunt Pellentesque senectus ligula Nullam gravida Nam velit. A accumsan.

img03

In nibh pede

Lorem ipsum dolor sit amet consectetuer Nam rhoncus elit Maecenas et. Tempor congue ante tincidunt malesuada felis mi fermentum Morbi urna Curabitur.

Ornare venenatis lacinia In nibh pede tempus lorem urna id orci. Quis id sagittis vitae semper lorem vestibulum purus eget Nullam Fusce. Parturient quis vitae Phasellus cursus porttitor Vestibulum Cum tempus porttitor porta. Dolor nibh nec hendrerit velit Pellentesque volutpat sagittis pulvinar eu urna. Convallis hendrerit sem tincidunt Pellentesque senectus ligula Nullam gravida Nam velit. A accumsan.

Ornare venenatis lacinia In nibh pede tempus lorem urna id orci. Quis id sagittis vitae semper lorem vestibulum purus eget Nullam Fusce. Parturient quis vitae Phasellus cursus porttitor Vestibulum Cum tempus porttitor porta. Dolor nibh nec hendrerit velit Pellentesque volutpat sagittis pulvinar eu urna. Convallis hendrerit sem tincidunt Pellentesque senectus ligula Nullam gravida Nam velit. A accumsan.

img04

Quis id sagittis

Lorem ipsum dolor sit amet consectetuer Nam rhoncus elit Maecenas et. Tempor congue ante tincidunt malesuada felis mi fermentum Morbi urna Curabitur.

Ornare venenatis lacinia In nibh pede tempus lorem urna id orci. Quis id sagittis vitae semper lorem vestibulum purus eget Nullam Fusce. Parturient quis vitae Phasellus cursus porttitor Vestibulum Cum tempus porttitor porta. Dolor nibh nec hendrerit velit Pellentesque volutpat sagittis pulvinar eu urna. Convallis hendrerit sem tincidunt Pellentesque senectus ligula Nullam gravida Nam velit. A accumsan.

Ornare venenatis lacinia In nibh pede tempus lorem urna id orci. Quis id sagittis vitae semper lorem vestibulum purus eget Nullam Fusce. Parturient quis vitae Phasellus cursus porttitor Vestibulum Cum tempus porttitor porta. Dolor nibh nec hendrerit velit Pellentesque volutpat sagittis pulvinar eu urna. Convallis hendrerit sem tincidunt Pellentesque senectus ligula Nullam gravida Nam velit. A accumsan.

img05

Morbi urna

Lorem ipsum dolor sit amet consectetuer Nam rhoncus elit Maecenas et. Tempor congue ante tincidunt malesuada felis mi fermentum Morbi urna Curabitur.

Ornare venenatis lacinia In nibh pede tempus lorem urna id orci. Quis id sagittis vitae semper lorem vestibulum purus eget Nullam Fusce. Parturient quis vitae Phasellus cursus porttitor Vestibulum Cum tempus porttitor porta. Dolor nibh nec hendrerit velit Pellentesque volutpat sagittis pulvinar eu urna. Convallis hendrerit sem tincidunt Pellentesque senectus ligula Nullam gravida Nam velit. A accumsan.

Ornare venenatis lacinia In nibh pede tempus lorem urna id orci. Quis id sagittis vitae semper lorem vestibulum purus eget Nullam Fusce. Parturient quis vitae Phasellus cursus porttitor Vestibulum Cum tempus porttitor porta. Dolor nibh nec hendrerit velit Pellentesque volutpat sagittis pulvinar eu urna. Convallis hendrerit sem tincidunt Pellentesque senectus ligula Nullam gravida Nam velit. A accumsan.

This example uses div elements.

Script

jQuery(document).ready(function() {
  jQuery('#itemtransitions_2').itemtransitions({
    itemsSel  : 'div.itemwrap > div' ,
    prevClass : 'prev',
    nextClass : 'next',
    animation : 'fxCorner',
    selectName : 'fxselect2',
    animationStart : function(event, node, direction) {
       console.log(event, node,direction);
    },
    animationEnd : function(event, node, direction) {
       console.log(event, node,direction);
    }
  });
});