diff --git a/docs/index.html b/docs/index.html index 0742aef..5fc023a 100644 --- a/docs/index.html +++ b/docs/index.html @@ -23,7 +23,8 @@ Ĉi tiu paĝo estas disponebla ankaŭ en Esperanto.

Kyla

- shi/hir, creamsicle plush foxgirl
+ shi/hir, creamsicle plush foxgirl
noun, god of :3
sweet, kind

@@ -84,9 +85,16 @@ - + + + + + + + + - + \ No newline at end of file diff --git a/docs/neofoxrain.js b/docs/neofoxrain.js new file mode 100644 index 0000000..86d610d --- /dev/null +++ b/docs/neofoxrain.js @@ -0,0 +1,16 @@ +'use strict'; + +alert('oh no! not another alert!'); + +function rain() { + let falling = document.getElementsByClassName('falling'); + console.log('[info] there are ' + falling.length + ' things falling'); + for (const el of falling) { + el.style.left = `${Math.random() * 100}%`; + el.style.top = `${Math.random() * 50}%`; + el.style.setProperty('--offset-angle', `${Math.random() * 360}deg`); + } +} + +window.addEventListener('DOMContentLoaded', rain); + diff --git a/docs/style.css b/docs/style.css index 5eeaad6..9b9f40f 100644 --- a/docs/style.css +++ b/docs/style.css @@ -160,17 +160,21 @@ a img { .falling { position: absolute; - left: 50%; - top: 0; animation: fall 3s linear forwards infinite; + --offset-angle: 0; } @keyframes fall { 0% { - transform: translateY(-50vh) rotate(0); + transform: translateY(-50vh) rotate(var(--offset-angle)); } 100% { - transform: translateY(150vh) rotate(180deg); + transform: translateY(150vh) rotate(calc(180deg + var(--offset-angle))); } } + + +.tiny { + width: 100px; +} \ No newline at end of file