jquery canimate / rotation animation

Rotate 3D  jug
     The following jQuery animation example is used to rotate a jug like 3D rotation, the following animation is created by using 30 images.
     We are create the animation using the "canimate" jQuery plugin.

$(document).ready(function(){

   $('.canimation').canimate({

      totalFrames: 30,

      imagePrefix: 'test',

      fps: 24,

      preload:true

   });

});

     The above code is used to animate image, here we can set the frame size Frame Per Second speed and more options are there.
     If you set the imagePrefix is test and the totalFrames 30  then the 30 images are loaded and the image url is set like below

http://isthatclear.com/jquery/canimate/images/second_folder/test0000.png
http://isthatclear.com/jquery/canimate/images/second_folder/test0001.png
http://isthatclear.com/jquery/canimate/images/second_folder/test0002.png
http://isthatclear.com/jquery/canimate/images/second_folder/test0003.png
------
------
------
http://isthatclear.com/jquery/canimate/images/second_folder/test0030.png

Example Program:- (Editor)

Editor is Loading...

Output:-

Download Full Source Code
Advertisement