jQuery Plugin for Rendering Scroll-Based HTML Animations

animate-when-scrolled-into-view-jquery

Storyline building beautiful landing pages that changes as the user scrolls up or down. Storyline is a jQuery scroll-based animation library that applies custom CSS styles or classes to elements as they pass through the viewport.

animate when scrolled into view jquery, trigger animation when element is visible, trigger css animation on scroll, web page scrolling animation effects with css3 & jquery

  • frameSelector’ – String; a selector for the target storyline frame.
  • onEnter – Function; called when the frame becomes visible.
  • onActive – Function; called while the frame is visible, on each scroll event.
  • onLeave – Function; called when the frame becomes invisible to the user.
  • scrollIntoView – Boolean; overrides the option with the same name; triggered 250ms after onEnter to perform a scrollIntoView action

How to make use of it:

1. To get began, embody the principle JavaScript storyline.js after loading the most recent jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/storyline.js"></script>

2. Initialize the plugin heading in the right direction parts and apply your individual CSS kinds to them as they’re scrolled into or out of the viewport.

<section class="frame1">
  <h1>Example</h1>
  <div class="box">
  </div>
</section>
<section class="frame2">
  <h1>Keep Scrolling</h1>
  <div class="box">
  </div>
</section>
<section class="frame3">
  <h1>Frame 3</h1>
  <div class="box">
  </div>
</section>
// Cache objects
var objectsCache = {
  frame1: $('.frame1 > .box'),
  frame2: $('.frame2 > .box'),
  frame3: $('.frame3 > .box'),
};

// Initialize the plugin
$.storyline({
  frames: {
    '.frame1' : {
      onActive: function(coords, event) {
        objectsCache.frame1.css({
          transform: `scale(${coords.percent.screenPlayed/10 + 0.8})`
        });
      }
    },
    '.frame2' : {
      onActive: function(coords, event){
        objectsCache.frame2.css({
          transform: `rotate(${coords.percent.frameUnCentered}deg) scale(0.8)`
        });
      }
    },
    '.frame4' : {
      onEnter: function() {
        objectsCache.frame4.addClass('active');
      },
      onLeave: function() {
        objectsCache.frame4.removeClass('active');
      }
    },
  }
});

3. Generate a navigation menu to navigate between these frames. Can be both a boolean or an array.

$.storyline({
  frames: {
   // frames here
  },
  buildMenu: ['1', '2', '3', '4', '5', '6'],
  menuSpeed: 3000, // default: 1500
});

4. Enable the event mode.

$.storyline({
  frames: {
   // frames here
  },
  guide: true
});

5. Set the gap between the present body and the highest of the web page.

$.storyline({
  frames: {
   // frames here
  },
  frameTop: 20
});

6. Determine whether or not to disregard warnings.

$.storyline({
  frames: {
   // frames here
  },
  ignoreWarnings: false
});

7. Set the body tolerance. Can be used to set off the onEnter and onLeave actions extra loosely.

$.storyline({
  frames: {
   // frames here
  },
  tolerance: 50
});

Animate Elements As They Cross Into The Viewport, Storyline Plugin/Github, start animation when div is visible, jquery animate when scroll into view, animate on scroll jquery


See Demo And Download

Official Website(Stephino): Click Here

This superior jQuery/javascript plugin is developed by Stephino. For extra Advanced usage, please go to the official website.