wip SI16 SI17
parent
9830344a58
commit
08a2ba744d
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"liveServer.settings.port": 5501
|
||||||
|
}
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,46 @@
|
|||||||
|
// 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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
.sticker {
|
||||||
|
position: absolute;
|
||||||
|
user-select: none;
|
||||||
|
border: 1px solid currentColor;
|
||||||
|
border-radius: 12px;
|
||||||
|
white-space: nowrap;
|
||||||
|
background-color: white;
|
||||||
|
font-size: 18px;
|
||||||
|
padding: 0 6px;
|
||||||
|
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue