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