Fade In/Out Elements Pada saat Scroll - ScrollFade.js

Demo Download

Raja Kode - ScrollFade.js adalah JavaScript library untuk membuat suatu element fading (memudar) pada saat di scroll.

Cara Memasang ScrollFade.js

1. Tambahkan Javascript scrollfade.js kedalam web kamu.

<script src="assets/js/scrollfade.js"></script>

2. Tambahkan juga CSS styles animasi fade in/out.

.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. Tambahkan class ‘scrollFade’ CSS  pada elemen yang ingin di fade.

<div class="item scrollFade"></div>
<div class="item scrollFade"></div>
<div class="item scrollFade"></div>
<div class="item scrollFade"></div>
...