article:
JS Plugin: Font.js
article:
JS Plugin: Scrollorama

JS Plugin: SuperScrollorama

Advertisement

"The jQuery plugin for supercool scroll animation"

Sample

Plugin: SuperScrollorama


Plugin: SuperScrollorama


Plugin: SuperScrollorama


Plugin: SuperScrollorama



Implement

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




source
download

Advertisement
Tags: scroll, plugin, jquery, layout, develop, web, internet

Leave a Comment

No Comment

© Creative3x Ltd.