ScrollFade is used to hide items in and out of view while scrolling through the page. Mark any elements you want to fade using class scrollFade and add the following CSS and JS themes to your website.
fade in div when scrolled into view, fade in and out on scroll css, fade in on scroll css, fade in fade out div on scroll, parallax fade in on scroll, fade in images on scroll
How to make use of it:
1. Add scrollfade.js to the web page.
<script src="assets/js/scrollfade.js"></script>
2. The essential CSS styles for the fade in/out animations.
.scrollFade { opacity: 1; pointer-events: all; } .scrollFade--hidden { opacity: 0; pointer-events: none; } .scrollFade--visible { opacity: 1; pointer-events: all; } .scrollFade--animate { transition: opacity 0.4s ease-in-out; }
3. Add the βscrollFadeβ CSS class to the goal parts and finished.
<div class="item scrollFade"></div> <div class="item scrollFade"></div> <div class="item scrollFade"></div> <div class="item scrollFade"></div> ...
Fade In/Out Elements On Scroll, ScrollFade Plugin/Github, header fade out on scroll
See Demo And Download
Official Website(meddlenz): Click Here
This superior jQuery/javascript plugin is developed by meddlenz. For extra Advanced Usages, please go to the official website.
Be First to Comment