PROWAREtech

articles » current » javascript » slide-on-scroll

JavaScript: Slide-on-Scroll

Add a sliding effect to the page as it is scrolled.

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 minifies to less than a single kilobyte. This library is compatible with Internet Explorer 11 and inspired by peeler.js. See also: slide-on-scroll HTML/CSS version.

(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="/js/slide-on-scroll.min.js"></script>

</body>
</html>

Coding Video

https://youtu.be/5TVlLnQo3L8


This site uses cookies. Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site. Read the privacy policy.
CLOSE