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.
31 lines
863 B
JavaScript
31 lines
863 B
JavaScript
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));
|
|
});
|
|
|
|
// spawnSticker(spawner, e);
|
|
function spawnSticker(e) {
|
|
let position = { x: e.clientX, y: e.clientY };
|
|
let content = e.target.dataset.sticker;
|
|
createSticker(content, position);
|
|
}
|
|
|
|
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)
|
|
`;
|
|
|
|
container.appendChild(sticker);
|
|
}
|