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.
33 lines
904 B
JavaScript
33 lines
904 B
JavaScript
const negativeStickers = document.querySelectorAll(".negative");
|
|
const container = document.getElementById("sticker-container");
|
|
|
|
var throttleSpawn = _.throttle(spawnSticker, 400);
|
|
|
|
Array.from(negativeStickers).forEach((spawner) => {
|
|
spawner.addEventListener("click", (e) => spawnSticker(e));
|
|
// spawner.addEventListener("mousemove", (e) => throttleSpawn(e));
|
|
});
|
|
|
|
function spawnSticker(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
let position = { x: e.clientX, y: e.clientY };
|
|
getFromNegative(e.target, position);
|
|
}
|
|
|
|
function getFromNegative(target, position) {
|
|
sticker = target.cloneNode(true);
|
|
sticker.classList.add("sticker");
|
|
sticker.classList.remove("negative");
|
|
|
|
sticker.style.left = position.x + "px";
|
|
sticker.style.top = position.y + "px";
|
|
|
|
sticker.style.transform = `
|
|
rotate(${Math.random() * 20 - 10}deg)
|
|
translate(-50%, -100%)
|
|
`;
|
|
|
|
container.appendChild(sticker);
|
|
}
|