Fade-in Effect onScroll CSS & jQuery

by Rian .N Herdian

HTML

<p >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea distinctio dolore dicta totam delectus quod facilis aspernatur fugit voluptatum, enim incidunt mollitia consequatur libero accusantium. Iusto voluptates ab, deleniti odio.
</p>

<p >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea distinctio dolore dicta totam delectus quod facilis aspernatur fugit voluptatum, enim incidunt mollitia consequatur libero accusantium. Iusto voluptates ab, deleniti odio.
</p>
<img class="fadeIn" src="https://dummyimage.com/200x150/FFBA00/1a1a1a&text=Saya sedang Demo!"/>

<p class="fadeIn">
<b>Saya sedang Demo!</b> - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea distinctio dolore dicta totam delectus quod facilis aspernatur fugit voluptatum, enim incidunt mollitia consequatur libero accusantium. Iusto voluptates ab, deleniti odio.
</p>

<p >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea distinctio dolore dicta totam delectus quod facilis aspernatur fugit voluptatum, enim incidunt mollitia consequatur libero accusantium. Iusto voluptates ab, deleniti odio.
</p>

<img class="fadeIn" src="https://dummyimage.com/200x150/FFBA00/1a1a1a&text=Saya sedang Demo!"/>

<p class="fadeIn">
<b>Saya sedang Demo!</b> - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea distinctio dolore dicta totam delectus quod facilis aspernatur fugit voluptatum, enim incidunt mollitia consequatur libero accusantium. Iusto voluptates ab, deleniti odio.
</p>

<p >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea distinctio dolore dicta totam delectus quod facilis aspernatur fugit voluptatum, enim incidunt mollitia consequatur libero accusantium. Iusto voluptates ab, deleniti odio.
</p>

<img class="fadeIn" src="https://dummyimage.com/200x150/FFBA00/1a1a1a&text=Saya sedang Demo!"/>

<p class="fadeIn">
<b>Saya sedang Demo!</b> - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea distinctio dolore dicta totam delectus quod facilis...

CSS

body {
  text-align:center;
  padding:20px;
}
p.fadeIn {
    background:#FFBA00;
    padding:20px;
}
.fadeIn {
    transition:2s;
    visibility:hidden;
    opacity:0;
}
.fadeIn.active {
    visibility:visible;
    opacity:1;
}

JavaScript

$(window).scroll(function() {
    $('.fadeIn').each(function() {
        if ($(window).scrollTop() >= $(this).offset().top - $(window).height()) {
            $(this).addClass('active');
        } else {
            $(this).removeClass('active');
        }
    });
});