This time I will share jQuery Plugin and tutorial about Fade/Zoom In Elements On Scroll – jQuery FadeJr, hope it will help you in programming stack.
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.
1 |
<link rel="stylesheet" href="dist/FadeJr.min.css" /> |
2 |
<script src="/path/to/cdn/jquery.min.js"></script> |
3 |
<script src="dist/FadeJr.min.js"></script> |
2. Add the .fade-jr class to any element you’d like to animate during page scroll.
1 |
<img src="1.jpg" class="fade-jr" /> |
2 |
<img src="2.jpg" class="fade-jr" /> |
3 |
<img src="3.jpg" class="fade-jr" /> |
4 |
<img src="4.jpg" class="fade-jr" /> |
5 |
<img src="5.jpg" class="fade-jr" /> |
3. You can specify a time to wait before trigging the animation using the CSS transition-delay.
1 |
<span class="fade-jr" style="transition-delay: .5s">I Am Delayed </span> |
2 |
<span class="fade-jr" style="transition-delay: 1s">I Am Delayed Too</span> |
3 |
<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.
This awesome jQuery plugin is developed by John-Rhoy. For more Advanced Usages, please check the demo page or visit the official website.
