Fork me on GitHub

jQuery scrollMotion

The jQuery scollMotion plugin is an animation plugin that plays through a series of images depending upon where the current scroll window position is in relation to start and end points.

Version
1.1
Minified Filesize
3Kb
Licence
MIT/GPL
Browser Support
IE 6/7/8,Chrome,Safari,Firefox,Opera

Download Ver 1.1

Examples

Basic Setup

Vanilla nom. Just uses 0 as top and the y value of the scrollMotion container for the bottom value.


$('#example1').scrollMotion();

Manual Break Points

Set the top and bottom values manually for better control.


$('#example2').scrollMotion({
	top : 400,
	bottom : 800 	
});

Appearance

You can reveal the animation in relation to the progress through it.


$('#example3').scrollMotion({
	fadeIn : true
});

Non-destructive Animations

If you are building something in the animation, you might not want the animation to go backwards on the way up. So just add the oneway option and it will stop once the last frame is reached. 


$('#example4').scrollMotion({
	oneway : true
});

Chaining

Animation element is initialised then hidden and faded in.


$('#example4').scrollMotion({
	top : 100,
	bottom : 300,
	oneway : true
})
.hide()
.fadeIn(1000);

User Guide

Just add jQuery above 1.4.3 onto the page as well as the plugin script.

Add a container element with the images in the order required:


<div class="animation">
	<img src="img/frame1.jpg" width="640" height="480" />
	<img src="img/frame2.jpg" width="640" height="480" />
	<img src="img/frame3.jpg" width="640" height="480" />
	<img src="img/frame4.jpg" width="640" height="480" />
	<img src="img/frame5.jpg" width="640" height="480" />
</div>

Add the container CSS so it is the same width and height as the images.


.animation {
	width:640px;
	height:480px;
	overflow:hidden;
	/* works well with absolute positioning */
	position:absolute;
	top:400px;
}

Then simply initialise the code on the element.


/* best to set the top and bottom on absolute positioned elements */
$('.animation').scrollMotion({
	top : 400,
	bottom : 800
});

Options

The following are options you can override by just using a hash when you call the plugin like on any of the examples.


$.fn.scrollMotion.settings = {
	top : 100,	/* where animation starts */
	bottom : 300,	/* where animation ends */
	oneway : false,	/* if animation stops on completion */
	fadeIn : false	/* opacity of element same as % complete */
};

Notes

Dependencies

jQuery 1.4.3 or above

To Do

Support