Slide on Scroll JavaScript Library

Here is a teensy micro-library that adds a sliding effect to the page as it is scrolled. This Javascript code will minify to practically nothing. This file minfies to less than a single kilobyte. This library is compatible with Internet Explorer 11 and inspired by peeler.js.

(function () {
    var slides = document.getElementsByClassName("slide-on-scroll"), slideMemory = [], above = "999", slider = function () {
        var offset = window.pageYOffset, triggered = false, below = 998, current, len = slides.length, i = 0, j = 0;
        for (; i < len; i++) {
            if (offset <= slideMemory[i].max && offset >= slideMemory[i].min) {
                slides[i].style.marginTop = -(offset - (slideMemory[i].min)) + "px";
                slides[i].style.zIndex = above;
                triggered = true;
                current = i;
                break;
            }
        }
        for (; j < len; j++) {
            if (i != current && i < len) {
                slides[i].style.marginTop = "0px";
                slides[i].style.zIndex = below--;
            }
            i++;
            if (i == len) { // RESET ROTATION
                slides[i - 1].style.marginTop = "0px";
                i = 0;
            }
        }
        if (!triggered) { // THEN AT TOP OF WINDOW
            slides[0].style.marginTop = "0px";
            slides[0].style.zIndex = above;
        }
    }, addHandler = function (type, handler) {
        var w = window;
        if (w.addEventListener) {
            w.addEventListener(type, handler, false);
        } else if (w.attachEvent) {
            w.attachEvent("on" + type, handler);
        } else {
            w["on" + type] = handler;
        }
    }, setBodyHeight = function () {
        var bodyHeight = 0;
		slideMemory = []; // RESET slideMemory
        for (var i = 0, len = slides.length; i < len; i++) {
            var slide = slides[i];
            var height = window.innerHeight;
            slide.style.height = parseInt(height) + "px";
            slideMemory.push({ min: bodyHeight, max: bodyHeight + height });
            bodyHeight += height;
        }
        document.body.style.height = bodyHeight + "px";
    };
    setBodyHeight();
    addHandler("resize", setBodyHeight);
    addHandler("scroll", slider);
    addHandler("load", slider);
})();

Using the slide-on-scroll library requires that the class slide-on-scroll be added to each HTML element that will slide as the window is scrolled.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>slide-on-scroll.js Example</title>
	<style>
	header {
		text-align: center;
		font-size: 48px;
	}
	.slide-on-scroll {
		position: fixed; /* must be "fixed" */
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		display: flex; /* could be "display: block;" flex was used to center text on page */
		justify-content: center;
		align-items: center;
		overflow: hidden;
		-moz-box-shadow: 0 0 10px black;
		-webkit-box-shadow: 0 0 10px black;
		box-shadow: 0 0 10px black;
		background-color: dimgray;
		color: white;
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
	}
	.slide-on-scroll:nth-child(2) {
		background-image: url(https://picsum.photos/id/1044/1920/1080);
	}
	.slide-on-scroll:nth-child(3) {
		background-image: url(https://picsum.photos/id/10/1920/1080);
	}
	.slide-on-scroll:nth-child(4) {
		background-image: url(https://picsum.photos/id/296/1920/1080);
	}
	</style>
</head>

<body>
	<div class="slide-on-scroll">
		<header>
			<h1>slide-on-scroll.js example</h1>
			<div>Scroll down!</div>
		</header>
	</div>

	<div class="slide-on-scroll">
		<header>
			<h1>slide-on-scroll.js example</h1>
			<div>Scroll down!</div>
		</header>
	</div>

	<div class="slide-on-scroll">
		<header>
			<h1>slide-on-scroll.js example</h1>
			<div>Scroll down!</div>
		</header>
	</div>

	<div class="slide-on-scroll">
		<header>
			<h1>slide-on-scroll.js example</h1>
		</header>
	</div>

	<script type="text/javascript" src="http://www.prowaretech.com/js/slide-on-scroll.min.js"></script>

</body>
</html>

Coding Video

https://youtu.be/5TVlLnQo3L8