Fade in Elements as They Come Into View.

Introduction

Fading content in as it comes into view is a nice effect you can add to your website to enhance your users experience. This post explains how to add that effect to your website.

The Code

JavaScript

First we'll add the following JavaScript that keeps an eye out for elements that come into view as the user scrolls vertically. We're specifically watching for elements with the class fade-in. Once those elements come into view we'll add a class of is-faded to them so we can fade them in with css.

CSS

We'll make sure the elements with the class fade-in start out hidden by adding opacity: 0; to them. Then once they are scrolled into view and have the class is-faded we'll fade them in using the fadeIn keyframe animation.

Wrapping Up

Now that we have our JavaScript and CSS in place, any element that we add the fade-in class to will start out hidden and get faded in when they come into view.

Live example

https://codepen.io/zpthree/full/abVoqxY

Source code

https://codepen.io/zpthree/pen/abVoqxY