Apply CSS Animations To Elements On Scroll - jQuery Toanimate.js

File Size: 3.85 KB
Views Total: 1178
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Apply CSS Animations To Elements On Scroll - jQuery Toanimate.js

A lightweight and easy-to-use jQuery plugin which allows for creating fancy scrolling animations on any DOM elements using CSS3 animations based on Animate.css.

How to use it:

1. Load the required animate.css in your document's head section as below:

<head>
  ...
  <link rel="stylesheet" href="/path/to/animate.min.css">
  ...
</head>

2. Load the jQuery Toanimate.js script along with the latest version of jQuery library at the end of the document.

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="toanimate.js"></script>

3. Assign an animation type of your choice to the element and specify the scroll offset to trigger the animation using data-animate="ANIMATION; OFFSET" attribute as this:

<span class="el" data-animate="pulse;700"></span>

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