All checks were successful
Swaous.Asuscomm Build / Build-Docker-Image (push) Successful in 2m35s
130 lines
3.6 KiB
JavaScript
Executable File
130 lines
3.6 KiB
JavaScript
Executable File
/* Fun scroll capture stuff :D */
|
|
var scrollPos = {
|
|
realX: 0,
|
|
realY: 0,
|
|
virtX: 0,
|
|
virtY: 0
|
|
};
|
|
|
|
const rScroll = () => {
|
|
window.scrollTo({
|
|
top: scrollPos.virtY,
|
|
left: scrollPos.virtX
|
|
});
|
|
};
|
|
|
|
function textNodesUnder(el){ // THANKS, STACKOVERFLOW
|
|
var n, a=[], walk=document.createTreeWalker(el,NodeFilter.SHOW_TEXT,null,false);
|
|
while(n=walk.nextNode()) a.push(n);
|
|
return a;
|
|
}
|
|
|
|
const firstRoomSize = 3000;
|
|
const secondRoomSize = 3000;
|
|
|
|
const rooms = [
|
|
{
|
|
el: document.getElementById("head"),
|
|
size: 3000,
|
|
type: "opacity"
|
|
},
|
|
{
|
|
el: document.getElementById("firstpage"),
|
|
size: 3000,
|
|
type: "opacity"
|
|
},
|
|
{
|
|
el: document.getElementById("secondpage"),
|
|
size: 3000,
|
|
type: "opacity"
|
|
},
|
|
{
|
|
el: document.getElementById("thirdpage"),
|
|
size: 3000,
|
|
type: "opacity"
|
|
}
|
|
];
|
|
|
|
const doScrollTasks = () => {
|
|
var roomOffset = 0;
|
|
rooms.forEach(item => {
|
|
if (item.type == "opacity") {
|
|
var subtractor = 0;
|
|
if (scrollPos.realY - roomOffset > item.size / 2) {
|
|
subtractor = (scrollPos.realY - roomOffset) - item.size / 2;
|
|
}
|
|
var percent = (item.size - subtractor - (scrollPos.realY - roomOffset)) / item.size;
|
|
item.el.style.opacity = percent;
|
|
if ((item.size - subtractor - (scrollPos.realY - roomOffset)) / item.size < 0) {
|
|
item.el.style.visibility = "hidden";
|
|
}
|
|
else {
|
|
item.el.style.visibility = "";
|
|
}
|
|
}
|
|
roomOffset += item.size;
|
|
});
|
|
document.getElementsByTagName("ol")[0].scrollTo({
|
|
left: 0,
|
|
top: (scrollPos.realY - roomOffset) / 10
|
|
});
|
|
var baseline = (scrollPos.realY - roomOffset) / 10 - document.getElementsByTagName("ol")[0].scrollHeight;
|
|
scrollPos.virtY = baseline;
|
|
baseline -= window.innerHeight;
|
|
var proportion = ((window.innerWidth - baseline) / window.innerWidth);
|
|
if (proportion < 0) {
|
|
scrollPos.realY = roomOffset + (document.getElementsByTagName("ol")[0].scrollHeight + window.innerWidth + window.innerHeight) * 10;
|
|
document.getElementById("youfinished").style.display = "";
|
|
}
|
|
document.getElementById("final-inner").style.transform = "translate(" + 100 * proportion + "vw, -50%)";
|
|
document.getElementById("final").style.backgroundColor = "rgba(0, 0, 0, " + (baseline / window.innerWidth) + ")";
|
|
rScroll();
|
|
};
|
|
|
|
doScrollTasks(); // Initial scrolling reset and setup
|
|
|
|
const scrollBy = (x, y) => {
|
|
scrollPos.realX += x;
|
|
scrollPos.realY += y;
|
|
if (scrollPos.realY < 0) {
|
|
scrollPos.realY = 0;
|
|
}
|
|
if (scrollPos.realX != 0) {
|
|
scrollPos.realX = 0;
|
|
}
|
|
doScrollTasks();
|
|
}
|
|
|
|
window.addEventListener("wheel", (event) => {
|
|
scrollBy(event.deltaX, event.deltaY);
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
}, { passive: false });
|
|
|
|
document.getElementById("head").ontransitionend = () => {
|
|
document.getElementById("scrollDown").classList.add("ready");
|
|
};
|
|
|
|
window.addEventListener("keydown", (evt) => {
|
|
if (evt.key == "ArrowUp") {
|
|
scrollBy(0, -300);
|
|
}
|
|
else if (evt.key == "ArrowDown") {
|
|
scrollBy(0, 300);
|
|
}
|
|
});
|
|
|
|
const countUnder = (node) => {
|
|
var wc = 0;
|
|
textNodesUnder(node).forEach(item => {
|
|
item.textContent.split(" ").forEach(word => {
|
|
if (word != "") {
|
|
wc++;
|
|
}
|
|
});
|
|
});
|
|
return wc;
|
|
};
|
|
|
|
document.getElementById("wordcount").innerText = countUnder(document.documentElement) - countUnder(document.getElementById("final"));
|