Create Scroll-triggered Animations Using CSS - jQuery ScrollOnReveal.js
File Size: | 4.89 KB |
---|---|
Views Total: | 157 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

ScrollOnReveal.js is a tiny yet customizable jQuery plugin for animating elements as they enter the viewport.
It works by detecting the element's position and applying custom CSS-powered animations to it when scrolling down. Great for storytelling, interactive one page scroll website, parallax scroll effects, product showcases, and more.
How to use it:
1. Insert the ScrollOnReveal.js
script after jQuery.
<script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/js/ScrollOnReveal.js"></script>
2. Apply the default fadeIn animation to the target element as it's scrolled into view.
<div class="example"> <h2>I'm just fading ...</h2> </div>
$(function(){ $('.example').ScrollOnReveal(); });
3. Override the default CSS rules to create your own scroll animations.
$('.example').ScrollOnReveal({ beforeCss: { 'transform': 'rotate(360deg)' }, animatedCss: { transform: 'rotate(0deg)' } });
4. Override the default options to customize the scroll animations.
$('.example').ScrollOnReveal({ // detect scroll events in this container container: $(window), // animation speed speed: 1000, // reset the animation when the element enters the viewport again reset: true, // animation delay delay: 80, // offset in px viewFactor: 20, // extra easing functions easing: 'ease-in-out', });
This awesome jQuery plugin is developed by dorultan. For more Advanced Usages, please check the demo page or visit the official website.