https://penguinmap.com/static/js/scrollfade-0.1.js

1// ScrollFade 0.1
2
3var fadeElements = document.getElementsByClassName('scrollFade');
4
5function scrollFade() {
6	var viewportBottom = window.scrollY + window.innerHeight;
7
8	for (var index = 0; index < fadeElements.length; index++) {
9		var element = fadeElements[index];
10		var rect = element.getBoundingClientRect();
11
12		var elementFourth = rect.height/4;
13		var fadeInPoint = window.innerHeight - elementFourth;
14		var fadeOutPoint = -(rect.height/2);
15
16		if (rect.top <= fadeInPoint) {
17			element.classList.add('scrollFade--visible');
18			element.classList.add('scrollFade--animate');
19			element.classList.remove('scrollFade--hidden');
20		} else {
21			element.classList.remove('scrollFade--visible');
22			element.classList.add('scrollFade--hidden');
23		}
24
25		if (rect.top <= fadeOutPoint) {
26			element.classList.remove('scrollFade--visible');
27			element.classList.add('scrollFade--hidden');
28		}
29	}
30}
31
32document.addEventListener('scroll', scrollFade);
33window.addEventListener('resize', scrollFade);
34document.addEventListener('DOMContentLoaded', function() {
35    scrollFade();
36});