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.
53 lines
1.6 KiB
JavaScript
53 lines
1.6 KiB
JavaScript
//
|
|
//
|
|
// Container is positioned absolute and the stickers scroll
|
|
const stickerSpawners = document.querySelectorAll("[data-sticker]");
|
|
const container = document.getElementById("sticker-container");
|
|
var throttleSpawn = _.throttle(spawnSticker, 400);
|
|
|
|
Array.from(stickerSpawners).forEach((spawner) => {
|
|
spawner.addEventListener("mousemove", (e) => throttleSpawn(e));
|
|
});
|
|
|
|
function spawnSticker(e) {
|
|
let position = { x: e.pageX, y: e.pageY };
|
|
let content = e.target.dataset.sticker;
|
|
container.appendChild(createSticker(content, position));
|
|
}
|
|
|
|
//
|
|
// Container is positioned fixed and the stickers remain in overlay
|
|
// (useful for the fixed header)
|
|
const fixedStickerSpawners = document.querySelectorAll("[data-sticker-fix]");
|
|
const fixedContainer = document.getElementById("sticker-fix-container");
|
|
var throttleFixedSpawn = _.throttle(spawnFixedSticker, 400);
|
|
|
|
Array.from(fixedStickerSpawners).forEach((spawner) => {
|
|
spawner.addEventListener("mousemove", (e) => throttleFixedSpawn(e));
|
|
});
|
|
|
|
function spawnFixedSticker(e) {
|
|
let position = { x: e.clientX, y: e.clientY };
|
|
let content = e.target.dataset.stickerFix;
|
|
fixedContainer.appendChild(createSticker(content, position));
|
|
}
|
|
|
|
//
|
|
//
|
|
// the sticker element is the same for both function
|
|
|
|
function createSticker(content, position) {
|
|
sticker = document.createElement("div");
|
|
sticker.classList.add("sticker");
|
|
sticker.innerHTML = content;
|
|
sticker.style.left = position.x + "px";
|
|
sticker.style.top = position.y + "px";
|
|
|
|
sticker.style.transform = `
|
|
translate(-50%, -50%)
|
|
rotate(${Math.random() * 40 - 20}deg)
|
|
`;
|
|
|
|
return sticker;
|
|
}
|