Animate Elements In The Viewport With CSS3 Animations - ScrollPoint

ScrollPoint is a lightweight and flexible jQuery scroll animation plugin which enables CSS3 powered animations on any element when it comes into view. Supports both scroll and resize events. Currently comes with 7 built-in CSS3 animations:

• fadeUp
• fadeLeft
• fadeRight
• slideRight
• slideLeft
• quickSlideRight
• zoomIn

How to use it:

1. The plugin requires the scrollpoint.jquery.css style sheet to provide the CSS3 based scroll animations.

<link href="scrollpoint.jquery.css" rel="stylesheet">

2. Then load the plugin and jQuery library in the document.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous"></script>
<script src="scrollpoint.jquery.js"></script>

3. Call the function scrollpoint on the target element you want to animate in when scrolling. Done.

...
<div class="box"></div>
...

$('.box').scrollpoint({
  animation: 'fadeUp' // fadeLeft, fadeRight, slideRight, slideLeft, quickSlideRight, zoomIn
});

4. Config the scroll-triggered animation by overriding the options as these:

$('.box').scrollpoint({
  animation: 'fadeUp'
  offset: 0, // in pixels
  triggeredClass: '', // CSS when triggered
  loadAfter: false, // an element required to load before this element
});

5. Callback functions available.

$('.box').scrollpoint({
  beforeTrigger: function(){},
  onTrigger: function(){}
});

---

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