ScrollMation

ScrollMation is designed to help developers animate elements on the scroll. Elements flyin and fade out as the user scrolls down the page. It's not super glamorous but it's a start.

How it works

Element Options

	$("#element").scrollMation({
		action : "fadeIn", // fadeIn,fadeOut,flyIn
		scrollPos: height-(height*.1), // When to start the scroll. Distance from the top of screen. height = $( window ).height();
		duration: (height-247)*.35, // How long the animation lasts. This is a number of scrolled pixels. 
		startPos: 600, // Elements initial starting postion, used for flyIn
		endPos: 0, // Elements ending postion, used for flyIn
	});

Make sure you include jQuery and the Scrollmation plugin on your page.

	$(document).ready(function() {
		//Create all your animations in a function. You define what you want to animate and how.
		function yourAnimations(){
			//Animate multiple objects the same way
			$(".fadein").scrollMation({action : 'fadeIn',});
			//FadeIn Code Example
			$("#fadeinCode").scrollMation({action : 'fadeIn',});
			//FadeOut Code Example
			$("#fadeoutCode").scrollMation({action : 'fadeOut', scrollPos : 250,});
			//FadeOut Code Example
			$("#flyrightCode").scrollMation({action : 'flyIn', startPos : 600, endPos: 0,});
			//FadeOut Code Example
			$("#flyleftCode").scrollMation({action : 'flyIn', startPos : -600, endPos: 0,});
			//Multiple Code Example
			$("#multipleCode").scrollMation({action : 'fadeIn',});
			$("#multipleCode").scrollMation({action : 'flyIn', startPos : -600, endPos: 0,});
		}
		//Initiate the animations so that they apply before the user starts scrolling.
		yourAnimations();
		//Add the scroll event and call the animations function.
		$(window).scroll(function(){
			yourAnimations();
		});
	});

Keep Scrolling for Examples.

Fading In

	$(document).ready(function() {
		//Create all your animations in a function. You define what you want to animate and how.
		function yourAnimations(){
			$("#fadeinCode").scrollMation({action : 'fadeIn',});
		}
		//Initiate the animations so that they apply before the user starts scrolling.
		yourAnimations();
		//Add the scroll event and call the animations function.
		$(window).scroll(function(){
			yourAnimations();
		});
	});

Fade Out

With fadeout you will want to add a higher scroll position.

	$(document).ready(function() {
		//Create all your animations in a function. You define what you want to animate and how.
		function yourAnimations(){
			$("#fadeoutCode").scrollMation({action : 'fadeOut', scrollPos : 250,});
		}
		//Initiate the animations so that they apply before the user starts scrolling.
		yourAnimations();
		//Add the scroll event and call the animations function.
		$(window).scroll(function(){
			yourAnimations();
		});
	});

Fly In

Fly From Right

	$(document).ready(function() {
		//Create all your animations in a function. You define what you want to animate and how.
		function yourAnimations(){
			$("#flyrightCode").scrollMation({action : 'fadeIn', startPos : -600, endPos: 0,});
		}
		//Initiate the animations so that they apply before the user starts scrolling.
		yourAnimations();
		//Add the scroll event and call the animations function.
		$(window).scroll(function(){
			yourAnimations();
		});
	});

Fly From Left

	$(document).ready(function() {
		//Create all your animations in a function. You define what you want to animate and how.
		function yourAnimations(){
			$("#flyleftCode").scrollMation({action : 'fadeIn', startPos : -600, endPos: 0,});
		}
		//Initiate the animations so that they apply before the user starts scrolling.
		yourAnimations();
		//Add the scroll event and call the animations function.
		$(window).scroll(function(){
			yourAnimations();
		});
	});

Multiple Effects

You can add multiple effects to the same element. That's not really that impressive since there are only 3 effects but you can make a nice fade in slide effect like this:

	$(document).ready(function() {
		//Create all your animations in a function. You define what you want to animate and how.
		function yourAnimations(){
			$("#multipleCode").scrollMation({action : 'fadeIn',});
			$("#multipleCode").scrollMation({action : 'flyIn', startPos : -600, endPos: 0,});
		}
		//Initiate the animations so that they apply before the user starts scrolling.
		yourAnimations();
		//Add the scroll event and call the animations function.
		$(window).scroll(function(){
			yourAnimations();
		});
	});

Apply Same Effect to Muliple Objects

You can apply effects to elements of a certain class by defining the class animation:

	$(document).ready(function() {
		//Any object with the fadein class with fade in as scroll happens
		function yourAnimations(){
			$(".fadein").scrollMation({action : 'fadeIn',});
		}
		//Initiate the animations so that they apply before the user starts scrolling.
		yourAnimations();
		//Add the scroll event and call the animations function.
		$(window).scroll(function(){
			yourAnimations();
		});
	});

Curabitur tincidunt lectus ut egestas blandit. Sed sagittis ante in vestibulum convallis. Mauris volutpat sit amet ipsum in cursus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam pretium elit eu pretium commodo. Fusce aliquet lorem eget nibh porttitor, vel faucibus nisl mollis. Proin ut consequat lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec volutpat elit ac lectus bibendum, non efficitur nisl facilisis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec velit ex, ornare sit amet congue et, sagittis nec nisi.