17+ Scroll Animations For Single Page App - jQuery Skroll

17+ Scroll Animations For Single Page App - jQuery Skroll
File Size: 8.07 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A jQuery vanilla JavaScript scroll animation plugin which provides 17+ CSS3 powered scroll-triggered animations for page elements when they're scrolled into view.

Highly customizable and you can enable/disable the scroll animations on mobile devices.

How to use it:

1. Load the latest version of the Skroll plugin at the end of the document.

<script src="skroll.min.js"></script>

2. Initialize the Skroll plugin on specific element(s) within the document.

new Skroll()
  .add(".element",{
    // options here
  })
.init();

3. Set the scroll animation you prefer. All possible animation types:

  1. zoomIn (Default)
  2. fadeInLeft
  3. fadeInRight
  4. fadeInLeftBig
  5. fadeInRightBig
  6. fadeInUp
  7. fadeInDown
  8. slideInLeft
  9. slideInLeftBig
  10. slideInRight
  11. slideInRightBig
  12. flipInX
  13. flipInY
  14. rotateRightIn
  15. rotateLeftIn
  16. growInLeft
  17. growInRight
new Skroll().add(".element",{

    animation: "zoomIn"

}).init();

4. Additional options to customize the animation.

new Skroll()
  .add(".element",{
    
    // delay in ms
    delay: 0,

    // duration of animation
    duration: 500,

    // easing function
    easing: "ease",

    // time to wait
    wait:0,

    // is repeatable?
    repeat:false
    
  })
.init();

5. Customize the top/bottom offsets to trigger the scroll animation.

new Skroll().add(".element",{

    triggerTop:.2,
    triggerBottom:.8

}).init();

6. Event handlers.

new Skroll().add(".element",{

     onEnter: function(index,e) {},
     onLeave: function(index,e) {},

}).init();

7. To enable the scroll animation on mobile devices, change the mobile:false to true in the JS.

new Skroll({
    mobile: true
})

8. Add your own animations:

new Skroll()
  .addAnimation("yourAnimation",{
    start:function(el){
      /*
      JQuery can also be used
      */
      el.style["transform"] = "scale(.1,.1)";
      el.style["opacity"] = 0;
     },
     end:function(el){
      el.style["transform"] = "scale(1,1)";
      el.style["opacity"] = 1;
     }
})

9. Recalculate the position of elements.

new Skroll().recalcPosition();

Changelog:

v2.0.0 (2019-03-10)

  • dropped jQuery dependency
  • bugs fixed

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