0xtlt/scrollReveal.html

## scrollReveal.html
<html>
    <head>
        <style>
            .fade {
              display: block;
              background: red;
              margin-bottom: 50px;
              width: 100%;
              height: 150px;
              opacity: 0.2;
              transform: translate3d(0,50px,0);
              transition: all .8s;
            }

            .fade.display {
              opacity: 1;
              transform: translate3d(0,0,0);
            }
        </style>
    </head>
    <body>
        <div class="fade display"></div>
        <div class="fade"></div>
        <div class="fade"></div>
        <div class="fade"></div>
        <div class="fade"></div>
        <div class="fade"></div>
        <div class="fade"></div>
        <div class="fade"></div>
        <div class="fade"></div>
        <div class="fade"></div>
        <div class="fade"></div>
        <div class="fade"></div>
        <div class="fade"></div>
        <div class="fade"></div>
        <div class="fade"></div>
        <div class="fade"></div>
        <div class="fade"></div>
        <div class="fade"></div>
        <div class="fade"></div>
        <div class="fade"></div>
        <div class="fade"></div>
        <div class="fade"></div>
        <div class="fade"></div>
        <div class="fade"></div>
        <div class="fade"></div>
        <div class="fade"></div>
        <div class="fade"></div>
        <div class="fade"></div>
        <div class="fade"></div>
        <div class="fade"></div>

        <script>
            let observers = [];

            // Options for the observers
            let observerOptions = {
                root: null,
                rootMargin: "0px",
                threshold: []
            };

            let thresholdSets = [];
            thresholdSets.length = document.querySelectorAll('.fade').length;
            thresholdSets.fill([], 0, document.querySelectorAll('.fade').length);

                for (let i=0; i<=1.0; i+= 0.01) {
                thresholdSets[0].push(i);
            }


            intersectionCallback = (entries) => {
                entries.forEach((entry) => {
                    let box = entry.target;
                    let visiblePct = (Math.floor(entry.intersectionRatio * 100));

                    if(visiblePct > 50){
                        box.classList.add('display');
                    }

                    box.innerHTML = visiblePct;
                });
            }

            document.querySelectorAll('.fade').forEach(element => {
                // Set up the observer for this box
                let i = observers.length;

                observerOptions.threshold = thresholdSets[i];
                observers[i] = new IntersectionObserver(intersectionCallback, observerOptions);
                observers[i].observe(element);
            });
        </script>
    </body>
</html>
	<html>
	<head>
	<style>
	.fade {
	display: block;
	background: red;
	margin-bottom: 50px;
	width: 100%;
	height: 150px;
	opacity: 0.2;
	transform: translate3d(0,50px,0);
	transition: all .8s;
	}

	.fade.display {
	opacity: 1;
	transform: translate3d(0,0,0);
	}
	</style>
	</head>
	<body>
	<div class="fade display"></div>
	<div class="fade"></div>
	<div class="fade"></div>
	<div class="fade"></div>
	<div class="fade"></div>
	<div class="fade"></div>
	<div class="fade"></div>
	<div class="fade"></div>
	<div class="fade"></div>
	<div class="fade"></div>
	<div class="fade"></div>
	<div class="fade"></div>
	<div class="fade"></div>
	<div class="fade"></div>
	<div class="fade"></div>
	<div class="fade"></div>
	<div class="fade"></div>
	<div class="fade"></div>
	<div class="fade"></div>
	<div class="fade"></div>
	<div class="fade"></div>
	<div class="fade"></div>
	<div class="fade"></div>
	<div class="fade"></div>
	<div class="fade"></div>
	<div class="fade"></div>
	<div class="fade"></div>
	<div class="fade"></div>
	<div class="fade"></div>
	<div class="fade"></div>

	<script>
	let observers = [];

	// Options for the observers
	let observerOptions = {
	root: null,
	rootMargin: "0px",
	threshold: []
	};

	let thresholdSets = [];
	thresholdSets.length = document.querySelectorAll('.fade').length;
	thresholdSets.fill([], 0, document.querySelectorAll('.fade').length);

	for (let i=0; i<=1.0; i+= 0.01) {
	thresholdSets[0].push(i);
	}


	intersectionCallback = (entries) => {
	entries.forEach((entry) => {
	let box = entry.target;
	let visiblePct = (Math.floor(entry.intersectionRatio * 100));

	if(visiblePct > 50){
	box.classList.add('display');
	}

	box.innerHTML = visiblePct;
	});
	}

	document.querySelectorAll('.fade').forEach(element => {
	// Set up the observer for this box
	let i = observers.length;

	observerOptions.threshold = thresholdSets[i];
	observers[i] = new IntersectionObserver(intersectionCallback, observerOptions);
	observers[i].observe(element);
	});
	</script>
	</body>
	</html>