scroll animations skroll - Download 17+ Scroll Animations For Single Page App - jQuery Skroll

Download 17+ Scroll Animations For Single Page App – jQuery Skroll

By Posted on

This time I will share jQuery Plugin and tutorial about 17+ Scroll Animations For Single Page App – jQuery Skroll, hope it will help you in programming stack.

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

Demo Download

“

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.

view source
1 <script src="skroll.min.js"></script>

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

view source
1 new Skroll()
2   .add(".element",{
3     // options here
4   })
5 .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
view source
1 new Skroll().add(".element",{
2  
3     animation: "zoomIn"
4  
5 }).init();

4. Additional options to customize the animation.

view source
01 new Skroll()
02   .add(".element",{
03      
04     // delay in ms
05     delay: 0,
06  
07     // duration of animation
08     duration: 500,
09  
10     // easing function
11     easing: "ease",
12  
13     // time to wait
14     wait:0,
15  
16     // is repeatable?
17     repeat:false
18      
19   })
20 .init();

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

view source
1 new Skroll().add(".element",{
2  
3     triggerTop:.2,
4     triggerBottom:.8
5  
6 }).init();

6. Event handlers.

view source
1 new Skroll().add(".element",{
2  
3      onEnter: function(index,e) {},
4      onLeave: function(index,e) {},
5  
6 }).init();

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

view source
1 new Skroll({
2     mobile: true
3 })

8. Add your own animations:

view source
01 new Skroll()
02   .add<a href="https://www.jqueryscript.net/animation/">Animation</a>("yourAnimation",{
03     start:function(el){
04       /*
05       JQuery can also be used
06       */
07       el.style["transform"] = "scale(.1,.1)";
08       el.style["opacity"] = 0;
09      },
10      end:function(el){
11       el.style["transform"] = "scale(1,1)";
12       el.style["opacity"] = 1;
13      }
14 })

9. Recalculate the position of elements.

view source
1 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.

source : jquery.net

Related posts: