From 2580c5dcb9f1e5e6541f63f8c7e24e5dfc82f078 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 24 Dec 2021 09:45:51 +0100 Subject: Add snow effect for Christmas time --- content/script.js | 22 ++++++++++++++++++++++ content/symbols.svg | 4 ++++ 2 files changed, 26 insertions(+) create mode 100644 content/script.js (limited to 'content') diff --git a/content/script.js b/content/script.js new file mode 100644 index 0000000..5702edf --- /dev/null +++ b/content/script.js @@ -0,0 +1,22 @@ +function createSnowFlake() { + const snowFlake = document.createElementNS("http://www.w3.org/2000/svg", "svg"); + const snowFlakeInner = document.createElementNS("http://www.w3.org/2000/svg", "use"); + + snowFlakeInner.setAttribute("href", "/symbols.svg#icon-asterisk"); + + snowFlake.classList.add("o-icon"); + snowFlake.classList.add("o-icon--snow"); + snowFlake.ariaHidden = true; + + snowFlake.style.width = Math.random() * 10 + 10 + 'px'; + snowFlake.style.left = Math.random() * window.innerWidth + 'px'; + snowFlake.style.animationDuration = Math.random() * 3 + 2 + 's'; + snowFlake.style.opacity = Math.random(); + + snowFlake.appendChild(snowFlakeInner); + document.body.appendChild(snowFlake); + + setTimeout(() => { snowFlake.remove(); }, 5000); +} + +window.addEventListener("load", () => { setInterval(createSnowFlake, 100); }) diff --git a/content/symbols.svg b/content/symbols.svg index df6ddd9..97992fc 100644 --- a/content/symbols.svg +++ b/content/symbols.svg @@ -8,6 +8,10 @@ + + + + -- cgit v1.2.3-54-g00ecf