Author: | prjct-samwest |
---|---|
Views Total: | 2,168 views |
Official Page: | Go to website |
Last Update: | October 9, 2020 |
License: | MIT |
Preview:

Description:
scrollCue.js is a JavaScript library that applies over 15+ CSS3 powered reveal animations to elements as you scroll down the page.
The animations are only triggered when part of the element becomes visible in the viewport.
CSS3 Animations Included:
- fadeIn
- slideInLeft
- slideInRight
- slideInDown
- slideInUp
- zoomIn
- zoomOut
- rotateIn
- bounceIn
- bounceInLeft
- bounceInRight
- bounceInDown
- bounceInUp
- flipInX
- flipInY
How to use it:
1. Add the stylesheet scrollCue.css
and JavaScript scrollCue.min.js
to the web page.
<link rel="stylesheet" href="scrollCue.css" /> <script src="scrollCue.min.js"></script>
2. Initialize the library and you’re ready to go.
scrollCue.init();
3. Apply a scroll-triggered animation to your element using the data-cue
attribute:
<img src="1.jpg" data-cue="fadeIn" /> <img src="2.jpg" data-cue="slideInLeft" /> <img src="3.jpg" data-cue="zoomIn" /> <img src="4.jpg" data-cue="rotateIn" /> <img src="5.jpg" data-cue="bounceIn" /> <img src="6.jpg" data-cue="flipInX" /> ...
4. Apply an animation to all child elements in a container using the data-cues
attribute:
<div data-cues="fadeIn"> <img src="1.jpg" /> <img src="2.jpg" /> <img src="3.jpg" /> <img src="4.jpg" /> <img src="5.jpg" /> ... </div>
5. Trigger the animation on all child elements when the first one is scrolled into view.
<div data-cues="fadeIn" data-group="images"> <img src="1.jpg" /> <img src="2.jpg" /> <img src="3.jpg" /> <img src="4.jpg" /> <img src="5.jpg" /> ... </div>
6. Determine the duration of the animation (defaults to 600ms) using the data-duration
attribute:
<div data-cues="fadeIn" data-duration="2000"> <img src="1.jpg" /> <img src="2.jpg" /> <img src="3.jpg" /> <img src="4.jpg" /> <img src="5.jpg" data-duration="5000" /> ... </div>
7. Determine the time to wait (Integer or Percentage. Defaults to -0.7) before triggering the animation on the next element using the data-interval
attribute:
<div data-cues="fadeIn" data-interval="-200"> <img src="1.jpg" /> <img src="2.jpg" data-interval="-200" /> <img src="3.jpg" /> <img src="4.jpg" /> <img src="5.jpg" /> ... </div>
8. Determine the order in which elements get revealed using the data-order
attribute:
<div data-cues="fadeIn" data-group="images"> <img src="1.jpg" /> <img src="2.jpg" data-order="-1" /> <img src="3.jpg" data-order="1" /> <img src="4.jpg" /> <img src="5.jpg" data-order="2" /> ... </div>
9. Reveal the elements in random order.
<div data-cues="fadeIn" data-sort="random"> <img src="1.jpg" /> <img src="2.jpg" /> <img src="3.jpg" /> <img src="4.jpg" /> <img src="5.jpg" /> ... </div>
10. Or reverse the order.
<div data-cues="fadeIn" data-sort="reverse"> <img src="1.jpg" /> <img src="2.jpg" /> <img src="3.jpg" /> <img src="4.jpg" /> <img src="5.jpg" /> ... </div>
11. Apply CSS classes to the elements when they’re scrolled into view.
<div data-cues="fadeIn" data-addClass="class-1 class-2"> <img src="1.jpg" /> <img src="2.jpg" /> <img src="3.jpg" ata-addClass="class-3 class-4" /> <img src="4.jpg" /> <img src="5.jpg" /> ... </div>
13. Determine the time to delay before triggering the animation.
<div data-cues="fadeIn" data-delay="2000"> <img src="1.jpg" /> <img src="2.jpg" data-delay="3000" /> <img src="3.jpg" /> <img src="4.jpg" /> <img src="5.jpg" /> ... </div>
12. Config the library during init.
scrollCue.init({ // duration duration : 600, // interval interval : -0.7, // scroll position to trigger the animation percentage : 0.75 });
13. Update the library in cases where new items have been added to the page.
scrollCue.update();
14. Enable/disable the scrollCue library.
scrollCue.enable(true/false);
Changelog:
v2.0.0 (10/09/2020)
- Added the ability to combine with docSlider.js
- Added the scrollCue.enable() method
- Added the new feature. [data-delay]
- Changed javascript compression algorithm
06/06/2020
- Bugfix