jQuery Plugin To Apply Animations To Elements When Scrolled Into View - sapopin.js

jQuery Plugin To Apply Animations To Elements When Scrolled Into View - sapopin.js
File Size: 6.3 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

sapopin.js is a lightweight jQuery based scroll animation plugin which uses CSS3 transforms to create and play animations on any elements when scrolled into view.

How to use it:

1. Load the jQuery sapopin.js script after jQuery library and we're ready to go.

<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="scripts/sapopin.js"></script>

2. Customize the animations on elements as follows:

  • First, you want to give each element a custom data-attribute data-sapopin. You can define the direction with by setting the attribute to left or right, or none, which would be from the bottom by default.
  • Second is the amount of pixels to be scrolled in, i.e. how much the element travels.
  • Third is the starting-opacity (Do you want it to fade in as well?)
  • Fourth is the speed in seconds.
<section id="section-1" data-sapopin>
  ...
</section>

<section id="section-2" data-sapopin="left">
  ...
</section>

<section id="section-3" data-sapopin="right">
  ...
</section>
$(function(){saPopIn(50, 0.1, 0.3);});

This awesome jQuery plugin is developed by justMoritz. For more Advanced Usages, please check the demo page or visit the official website.