Press "Enter" to skip to content

Fades Elements In/Out of View on Page Scroll | ScrollFade.js

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

    Leave a Reply

    Your email address will not be published. Required fields are marked *