Reveal Elements With 15+ CSS Powered Animations On Scroll

Reveal Elements With 15+ CSS Powered Animations On Scroll

scrollCue.js is a JavaScript library that applies over 15+ CSS3 powered reveal animations to elements as you scroll down the page.

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:

  1. fadeIn
  2. slideInLeft
  3. slideInRight
  4. slideInDown
  5. slideInUp
  6. zoomIn
  7. zoomOut
  8. rotateIn
  9. bounceIn
  10. bounceInLeft
  11. bounceInRight
  12. bounceInDown
  13. bounceInUp
  14. flipInX
  15. 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);

Download Details:

Author: prjct-samwest

Demo: https://prjct-samwest.github.io/scrollCue/examples.html

Source Code: https://github.com/prjct-samwest/scrollCue

css javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire CSS Developer

Want to develop a website or re-design using CSS Development? We build a website and we implemented CSS successfully if you are planning to **[Hire CSS Developer](https://hourlydeveloper.io/hire-dedicated-css-developer/ "Hire CSS Developer")**...

How to Create JavaScript carousel with HTML, CSS and JavaScript

Learn how to create JavaScript carousel with HTML, CSS and JavaScript. Learn how to create a JavaScript slider step by step. Now many people will just download a library to create a JavaScript carousel or JavaScript slider.

Countdown with HTML, CSS, and JavaScript / How to create JavaScript Countdown

Countdown with HTML, CSS, and JavaScript / How to create JavaScript Countdown. W will build a Responsive Website with HTML, CSS, and JavaScript

Learn to use variables in CSS (CSS Tricks)

whats the variable in CSS, how to declare use them. Whats the benefit of variables in CSS. Lets learn all this. #Variables #CSS #HTML #CssVariables #ITArticles

Animated Background For Website Header using CSS and Vanilla Javascript

In this video, you'll see Animated Background For Website Header using CSS & Vanilla Javascript - CSS Animation Effects