Free jQuery Plugins, HTML5 and CSS3 Scripts - Providing tons of Jquery Plugins,Html5 and CSS3 Scripts for web developers to preview and download. By using these resources, you can create amazing effects with fancy animations of content elements like text, images and so on.
Please note, this is a powerful tool, and with great power comes great responsibility.
Use wisely. A little subtlety can go a long way.
★ ★ ★
Superscrollorama is powered by TweenMax and the Greensock Tweening Engine. Go to greensock.com for documentation on how to use it. Why Greensock/TweenMax? Great performance, ease-of-use, expandibility and basically because it is awesome.
First, link to the jQuery CDN and then embed TweenMax.js and Superscrollorama. Next, start up Superscrollorama. Think of it as a controller for animation. You add tweens and timelines to it, targeting when an element appears in the viewport or at a specific scroll point.
Use the addTween method to build your scroll animations.
In the example below, the animation fades in when scrolled into view.
$(document).ready(function() { var controller = $.superscrollorama(); controller.addTween('#fade', TweenMax.from($('#fade'), .5, {css:{opacity:0}})); });
★ ★ ★
The default duration is 0, which means the tween plays through completely when its scroll point is reached. You can add a duration which will instead sync the tween progress to the scrollbar position. Instead of one tween, you can create a timeline of multiple tweens.
// parallax example controller.addTween( '#examples-parallax', (new TimelineLite()) .append([ TweenMax.fromTo($('#parallax-it-left'), 1, {css:{top: 200}, immediateRender:true}, {css:{top: -600}}), TweenMax.fromTo($('#parallax-it-right'), 1, {css:{top: 500}, immediateRender:true}, {css:{top: -1250}}) ]), 1000 // scroll duration of tween );
★ ★ ★
The 4th parameter is offset, which you can use to adjust the scroll point at which the animation is triggered.
controller.addTween('#fade', TweenMax.from($('#fade'),.5,{ css:{opacity:0}}), 0, // scroll duration of tween (0 means autoplay) 200); // offset the start of the tween by 200 pixels
★ ★ ★
Pass in a function to the tween for when the animation is complete.
controller.addTween('#fade', TweenMax.from($('#fade'),.5,{ css:{opacity:0}, onComplete: function(){alert('test')} }));
★ ★ ★
You can use the pin method to pin an element, do a series of animations and then unpin it.
Example:
controller.pin($('#examples-2'), 3000, { anim: (new TimelineLite()) .append( TweenMax.fromTo($('#move-it'), .5, {css:{left: -200, top: 500}, immediateRender:true}, {css:{top: -400}}) ) .append( TweenMax.to($('#move-it'), .5, {css:{left: 200}}) ) .append( TweenMax.to($('#move-it'), .5, {css:{top: -200}}) ) .append( TweenMax.to($('#move-it'), .5, {css:{left: 0}}) ) })