Fade/Zoom In Elements On Scroll - jQuery FadeJr

FadeJr is a really simple jQuery scroll animation plugin that applies opacity and zoom effects to any element while scrolling down the webpage, depending on its position relative to the top.

The fade/zoom in animations are based on CSS opacity property and CSS3 2D transforms.

How to use it:

1. To use the plugin, include jQuery library and the following JS & CSS files on the page.

<link rel="stylesheet" href="dist/FadeJr.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="dist/FadeJr.min.js"></script>

2. Add the .fade-jr class to any element you'd like to animate during page scroll.

<img src="1.jpg" class="fade-jr" />
<img src="2.jpg" class="fade-jr" />
<img src="3.jpg" class="fade-jr" />
<img src="4.jpg" class="fade-jr" />
<img src="5.jpg" class="fade-jr" />

3. You can specify a time to wait before trigging the animation using the CSS transition-delay.

<span class="fade-jr" style="transition-delay: .5s">I Am Delayed </span>
<span class="fade-jr" style="transition-delay: 1s">I Am Delayed Too</span>
<span class="fade-jr" style="transition-delay: 1.5s">Me Too</span>

4. You can modify the variable if you'd like to change the fade time.

:root{
  --fade-time: .5s;
}

---

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