jQuery ScrollMation Plugin Example
Keep Scrolling for Examples.
Fading In
Lorem Ipsum "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..." Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas odio ac sagittis rutrum. Fusce at aliquet lacus. Suspendisse viverra risus at vehicula rhoncus. In tempor purus iaculis, varius nibh vel, convallis sem. Donec augue velit, vulputate vitae dolor sed, varius feugiat libero. Phasellus efficitur blandit odio, eget malesuada dui porttitor tincidunt. Cras vitae metus vitae mauris pretium accumsan sed nec ante. Vivamus lectus dui, maximus sit amet ipsum eget, convallis facilisis eros. Proin sed fermentum risus, sed rutrum sapien. Integer sit amet sapien eu nulla commodo consequat vitae et nisl. Etiam efficitur erat est, ac sagittis risus tincidunt ut. Curabitur vel gravida diam, a tristique odio. Curabitur molestie egestas ultricies. Nullam fringilla ex velit, sed dignissim velit pharetra in. Nunc ac arcu magna. Etiam est ligula, convallis et gravida eget, feugiat et odio.
Fade Out
With fadeout you will want to add a higher scroll position.
Lorem Ipsum "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..." Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas odio ac sagittis rutrum. Fusce at aliquet lacus. Suspendisse viverra risus at vehicula rhoncus. In tempor purus iaculis, varius nibh vel, convallis sem. Donec augue velit, vulputate vitae dolor sed, varius feugiat libero. Phasellus efficitur blandit odio, eget malesuada dui porttitor tincidunt. Cras vitae metus vitae mauris pretium accumsan sed nec ante. Vivamus lectus dui, maximus sit amet ipsum eget, convallis facilisis eros. Proin sed fermentum risus, sed rutrum sapien. Integer sit amet sapien eu nulla commodo consequat vitae et nisl. Etiam efficitur erat est, ac sagittis risus tincidunt ut. Curabitur vel gravida diam, a tristique odio. Curabitur molestie egestas ultricies. Nullam fringilla ex velit, sed dignissim velit pharetra in. Nunc ac arcu magna. Etiam est ligula, convallis et gravida eget, feugiat et odio.
Fly In
Fly From Right
Lorem Ipsum "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..." Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas odio ac sagittis rutrum. Fusce at aliquet lacus. Suspendisse viverra risus at vehicula rhoncus. In tempor purus iaculis, varius nibh vel, convallis sem. Donec augue velit, vulputate vitae dolor sed, varius feugiat libero. Phasellus efficitur blandit odio, eget malesuada dui porttitor tincidunt. Cras vitae metus vitae mauris pretium accumsan sed nec ante. Vivamus lectus dui, maximus sit amet ipsum eget, convallis facilisis eros. Proin sed fermentum risus, sed rutrum sapien. Integer sit amet sapien eu nulla commodo consequat vitae et nisl. Etiam efficitur erat est, ac sagittis risus tincidunt ut. Curabitur vel gravida diam, a tristique odio. Curabitur molestie egestas ultricies. Nullam fringilla ex velit, sed dignissim velit pharetra in. Nunc ac arcu magna. Etiam est ligula, convallis et gravida eget, feugiat et odio.
Fly From Left
Lorem Ipsum "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..." Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas odio ac sagittis rutrum. Fusce at aliquet lacus. Suspendisse viverra risus at vehicula rhoncus. In tempor purus iaculis, varius nibh vel, convallis sem. Donec augue velit, vulputate vitae dolor sed, varius feugiat libero. Phasellus efficitur blandit odio, eget malesuada dui porttitor tincidunt. Cras vitae metus vitae mauris pretium accumsan sed nec ante. Vivamus lectus dui, maximus sit amet ipsum eget, convallis facilisis eros. Proin sed fermentum risus, sed rutrum sapien. Integer sit amet sapien eu nulla commodo consequat vitae et nisl. Etiam efficitur erat est, ac sagittis risus tincidunt ut. Curabitur vel gravida diam, a tristique odio. Curabitur molestie egestas ultricies. Nullam fringilla ex velit, sed dignissim velit pharetra in. Nunc ac arcu magna. Etiam est ligula, convallis et gravida eget, feugiat et odio.
Multiple Effects
Lorem Ipsum "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..." Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas odio ac sagittis rutrum. Fusce at aliquet lacus. Suspendisse viverra risus at vehicula rhoncus. In tempor purus iaculis, varius nibh vel, convallis sem. Donec augue velit, vulputate vitae dolor sed, varius feugiat libero. Phasellus efficitur blandit odio, eget malesuada dui porttitor tincidunt. Cras vitae metus vitae mauris pretium accumsan sed nec ante. Vivamus lectus dui, maximus sit amet ipsum eget, convallis facilisis eros. Proin sed fermentum risus, sed rutrum sapien. Integer sit amet sapien eu nulla commodo consequat vitae et nisl. Etiam efficitur erat est, ac sagittis risus tincidunt ut. Curabitur vel gravida diam, a tristique odio. Curabitur molestie egestas ultricies. Nullam fringilla ex velit, sed dignissim velit pharetra in. Nunc ac arcu magna. Etiam est ligula, convallis et gravida eget, feugiat et odio.
Apply Same Effect to Muliple Objects
You can apply effects to elements of a certain class by definine the class animation:
Lorem Ipsum "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..." Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas odio ac sagittis rutrum. Fusce at aliquet lacus. Suspendisse viverra risus at vehicula rhoncus. In tempor purus iaculis, varius nibh vel, convallis sem. Donec augue velit, vulputate vitae dolor sed, varius feugiat libero. Phasellus efficitur blandit odio, eget malesuada dui porttitor tincidunt. Cras vitae metus vitae mauris pretium accumsan sed nec ante. Vivamus lectus dui, maximus sit amet ipsum eget, convallis facilisis eros. Proin sed fermentum risus, sed rutrum sapien. Integer sit amet sapien eu nulla commodo consequat vitae et nisl. Etiam efficitur erat est, ac sagittis risus tincidunt ut. Curabitur vel gravida diam, a tristique odio. Curabitur molestie egestas ultricies. Nullam fringilla ex velit, sed dignissim velit pharetra in. Nunc ac arcu magna. Etiam est ligula, convallis et gravida eget, feugiat et odio.
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.
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.
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.