Press "Enter" to skip to content

jQuery Plugin for Rendering Scroll-Based HTML Animations

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, animate div on scroll jquery codepen, trigger animation when element is visible, trigger css animation on scroll, web page scrolling animation effects with css3 & jquery

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 Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *