MovieCrop.js

JavaScript Library to animate background of block elements.

Feature

• Animation background using CSS sprite
• Control the animation to play, reverse, stop and rewind
• Animation is repeatable

Requirement

• jQuery 1.7+

Usage

Simple way

You can just play the animation as below.

$(element).moviePlay();

With options

Pass the option as the first argument.

$(element).moviePlay({
    fps : 20,
    frames : 20,
    repeat : true,
    direction : "vertical"
});

• fps (Integer) : Frame per second
• frames (Integer) : Total frames
• repeat (Boolean) : Repeat the animation or not
• direction (String) : Direction to move background ("vertical" || "horizontal")

Control the animation

You can control the animation with methods.

var ele = $(element);
ele.moviePlay(); // Play
ele.movieReverse(); // Reverse
ele.movieStop(); // Stop
ele.movieRewind(); // Back to the first frame

With the callback

Pass the callback function as the second argument of moviePlay() or movieReverse().
It will be called when the animation end (If the "repeat" is false).

var ele = $(element);
ele.moviePlay({}, function(){ // the first argument is option...
    alert("Complete !")
});

Initialize with option

If you want to use the same option when calling play or reverse,
initialize with movieInit() method.

var ele = $(element);
ele.movieInit({frames:30, repeat:false});
ele.moviePlay();
ele.movieReverse();

Use with instance of MovieCrop class

You can create an instance of MovieCrop class,
and control the animation by calling its methods.

var mc = new MovieCrop(element, {fps:20, repeat:true});
mc.play();

Methods

• play(callback) : Play the animation
• reverse(callback) : Reverse the animation
• rewind() : Back to the first frame
• nextFrame() : Go to the next frame
• prevFrame() : Go to the previous frame
• setFrame(frame) : Go to the selected frame

Versions

• 0.9.1 : rename "playback" to "reverse"
• 0.9 : release

Author

mach3

• Website
• Blog
• twitter