PROWAREtech
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
Comment
