kio/kylamoe
kio/kylamoe
0
2
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

neofox rain more like neofox reign

Browse source
This commit is contained in:
residualentropy 2024-07-28 12:19:20 +02:00
parent 0c4be2445c
commit 11e3469e90
3 changed files with 35 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
docs/index.html
View file

@ -23,7 +23,8 @@
<span class="lighter plimalgranda"><a href="enhavo.html">Ĉi tiu paĝo estas disponebla ankaŭ en <span class="lighter plimalgranda"><a href="enhavo.html">Ĉi tiu paĝo estas disponebla ankaŭ en
Esperanto.</a></span> Esperanto.</a></span>
<h1>Kyla</h1> <h1>Kyla</h1>
<span class="lighter">shi/hir, creamsicle <span id="plush" title="Lexi used her witchcraft to turn my genetics into a living plushie...">plush</span> foxgirl</span><br> <span class="lighter">shi/hir, creamsicle <span id="plush"
title="Lexi used her witchcraft to turn my genetics into a living plushie...">plush</span> foxgirl</span><br>
noun, god of :3<br> noun, god of :3<br>
sweet, kind<br> sweet, kind<br>
<br> <br>
@ -84,9 +85,16 @@
<script src="code.js"></script> <script src="code.js"></script>
<img src="neofox.png" class="falling"> <script src="neofoxrain.js"></script>
<img src="neofox.png" class="falling tiny">
<img src="neofox.png" class="falling tiny">
<img src="neofox.png" class="falling tiny">
<img src="neofox.png" class="falling tiny">
<img src="neofox.png" class="falling tiny">
<img src="neofox.png" class="falling tiny">
<img src="neofox.png" class="falling tiny">
</div> </div>
</body> </body>
</html> </html>

16
docs/neofoxrain.js Normal file
View file

@ -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);

12
docs/style.css
View file

@ -160,17 +160,21 @@ a img {
.falling { .falling {
position: absolute; position: absolute;
left: 50%;
top: 0;
animation: fall 3s linear forwards infinite; animation: fall 3s linear forwards infinite;
--offset-angle: 0;
} }
@keyframes fall { @keyframes fall {
0% { 0% {
transform: translateY(-50vh) rotate(0); transform: translateY(-50vh) rotate(var(--offset-angle));
} }
100% { 100% {
transform: translateY(150vh) rotate(180deg); transform: translateY(150vh) rotate(calc(180deg + var(--offset-angle)));
} }
} }
.tiny {
width: 100px;
}