Create Scroll-triggered Animations Using CSS - jQuery ScrollOnReveal.js

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.