Fade In Animations On Scroll Or On Page Load Using jQuery

File Size: 5.41 KB
Views Total: 3740
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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.