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

12
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
Esperanto.</a></span>
<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>
sweet, kind<br>
<br>
@ -84,7 +85,14 @@
<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>
</body>

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 {
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;
}