Fade In Animations On Scroll Or On Page Load Using jQuery

A lightweight jQuery animation plugin that applies a fade-in animation to elements on document ready or when they become visible on the page.

Works perfectly on most major browsers which support CSS3 transforms and transitions.

See Also:

• 10 best scroll-triggered animation Plugins With JavaScript

How to use it:

1. Load the main stylesheet and JavaScript in the document.

<!-- Required Stylesheet -->
<link href="./css/common.css" rel="stylesheet">
<!-- jQuery -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- Main JavaScript -->
<script src="./js/script.js"></script>

2. Apply fade-in animation to elements using the following CSS classes:

• u-fade-type-static: Simple fade-in animation
• u-fade-type-left: Slide from the left
• u-fade-type-right: Slide from the right
• u-fade-type-top: Slide from the top
• u-fade-type-down: Slide from the bottom
• js-window-trigger: Trigger the animation on document ready
• js-scroll-trigger: Trigger the animation on scroll

<div class="u-fade-type-static js-window-trigger"></div>
<div class="u-fade-type-left js-scroll-trigger"></div>
<div class="u-fade-type-right js-scroll-trigger"></div>
<div class="u-fade-type-up js-scroll-trigger"></div>
<div class="u-fade-type-down js-scroll-trigger"></div>

---

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