You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 lines
1.6 KiB
JavaScript
65 lines
1.6 KiB
JavaScript
const informations = document.getElementById("information-list");
|
|
const stickerContainer = document.getElementById("sticker-container");
|
|
|
|
infoList = Array.from(informations.children);
|
|
loopIndex = 0;
|
|
|
|
let windowWidth;
|
|
let windowHeight;
|
|
|
|
let palette = ["#9EDAE2", "#9FD3A8", "#F7D8E8", "#F9F5B0", "#FFC496"];
|
|
|
|
window.addEventListener("load", () => {
|
|
getSize();
|
|
let color = palette[(palette.length * Math.random()) | 0];
|
|
document.documentElement.style.setProperty("--background", color);
|
|
});
|
|
|
|
window.addEventListener("resize", (e) => {
|
|
getSize();
|
|
});
|
|
|
|
function getSize() {
|
|
windowWidth = stickerContainer.clientWidth;
|
|
windowHeight = stickerContainer.clientHeight;
|
|
}
|
|
|
|
function percentagePosition(e, target) {
|
|
let targetRect = target.getBoundingClientRect();
|
|
let x = e.clientX - targetRect.left;
|
|
let y = e.clientY - targetRect.top;
|
|
return { x: ((x / windowWidth) * 100).toFixed(2), y: ((y / windowHeight) * 100).toFixed(2) };
|
|
}
|
|
|
|
window.addEventListener("click", (e) => {
|
|
getInput(e);
|
|
});
|
|
|
|
window.addEventListener("touchstart", (e) => {
|
|
getInput(e);
|
|
});
|
|
|
|
function getInput(e) {
|
|
placeSticker(percentagePosition(e, stickerContainer), infoList[loopIndex]);
|
|
// Cringe sorry
|
|
if (loopIndex < infoList.length - 1) {
|
|
loopIndex++;
|
|
} else {
|
|
loopIndex = 0;
|
|
}
|
|
}
|
|
|
|
function placeSticker(position, element) {
|
|
let sticker = element.cloneNode(true);
|
|
sticker.classList.add("sticker");
|
|
sticker.style.left = position.x + "%";
|
|
sticker.style.top = position.y + "%";
|
|
|
|
sticker.style.transform = `
|
|
translate(-50%, -50%)
|
|
rotate(${Math.random() * 40 - 20}deg)
|
|
`;
|
|
|
|
stickerContainer.appendChild(sticker);
|
|
}
|