52 lines
1.9 KiB
JavaScript
52 lines
1.9 KiB
JavaScript
/* Scrolly.JS is an extremely simple framework that gives CSS interoperation to scroll events. */
|
|
|
|
var scrollyContainers = document.getElementsByClassName("scrolly-container");
|
|
|
|
function scrolly() {
|
|
var scrollyItems = this.getElementsByClassName("scrolly");
|
|
var nearest = undefined;
|
|
var nearestVal = Infinity;
|
|
for (var i = 0; i < scrollyItems.length; i++) {
|
|
var position = scrollyItems[i].getBoundingClientRect();
|
|
var scrollyMargin = 0;
|
|
if (scrollyItems[i].hasAttribute("--data-scrollyMargin")) {
|
|
scrollyMargin = scrollyItems[i].getAttribute("--data-scrollyMargin");
|
|
}
|
|
if (position.top < window.innerHeight - scrollyMargin && position.bottom > scrollyMargin) {
|
|
scrollyItems[i].classList.add("scrolly-entered");
|
|
scrollyItems[i].classList.add("scrolly-in");
|
|
scrollyItems[i].classList.remove("scrolly-out");
|
|
}
|
|
else {
|
|
scrollyItems[i].classList.add("scrolly-out");
|
|
scrollyItems[i].classList.remove("scrolly-in");
|
|
}
|
|
var cDisp = Math.abs(window.innerHeight / 2 - (position.top + position.bottom) / 2);
|
|
scrollyItems[i].classList.remove("scrolly-center");
|
|
if (cDisp < nearestVal) {
|
|
if (nearest) {
|
|
nearest.classList.remove("scrolly-center");
|
|
}
|
|
nearest = scrollyItems[i];
|
|
scrollyItems[i].classList.add("scrolly-center");
|
|
nearestVal = cDisp;
|
|
}
|
|
}
|
|
}
|
|
|
|
for (var i = 0; i < scrollyContainers.length; i++) {
|
|
scrollyContainers[i].scrolly = scrolly;
|
|
scrollyContainers[i].scrolly();
|
|
}
|
|
|
|
window.addEventListener("scroll", () => {
|
|
for (var i = 0; i < scrollyContainers.length; i++) {
|
|
scrollyContainers[i].scrolly()
|
|
}
|
|
});
|
|
|
|
window.addEventListener("wheel", () => {
|
|
for (var i = 0; i < scrollyContainers.length; i++) {
|
|
scrollyContainers[i].scrolly()
|
|
}
|
|
}); |