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.
fadeIn.js
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.
fade-in.css
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
