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.

46 lines
1.6 KiB
JavaScript

// A lightweight sticker spawner to stick elements on your html page
const stickerSpawners = document.querySelectorAll("[data-sticker]");
var throttleSpawn = throttle(spawnSticker, 400);
Array.from(stickerSpawners).forEach((spawner) => {
spawner.addEventListener("mousemove", (e) => throttleSpawn(e));
});
function spawnSticker(e) {
var rect = e.target.getBoundingClientRect();
let position = { x: e.clientX - rect.left, y: e.clientY - rect.top };
let content = e.target.dataset.sticker;
e.originalTarget.appendChild(createSticker(content, position));
}
function createSticker(content, position) {
sticker = document.createElement("span");
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;
}
// from https://stackoverflow.com/questions/27078285/simple-throttle-in-javascript
function throttle (callback, limit) {
var waiting = false; // Initially, we're not waiting
return function () { // We return a throttled function
if (!waiting) { // If we're not waiting
callback.apply(this, arguments); // Execute users function
waiting = true; // Prevent future invocations
setTimeout(function () { // After a period of time
waiting = false; // And allow future invocations
}, limit);
}
}
}