rain speed
This commit is contained in:
parent
8ab1f558e1
commit
93832e0747
1 changed files with 8 additions and 2 deletions
10
index.html
10
index.html
|
|
@ -33,7 +33,7 @@
|
|||
|
||||
@keyframes fall {
|
||||
to {
|
||||
transform: translateY(100vh) rotate(360deg);
|
||||
transform: translateY(100vh) rotate(var(--rotation));
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -70,8 +70,14 @@
|
|||
tileElem.className = 'falling-tile';
|
||||
tileElem.innerHTML = randomTile.svg;
|
||||
tileElem.style.left = Math.random() * window.innerWidth + 'px';
|
||||
const duration = 3 + Math.random() * 2;
|
||||
const duration = 8 + Math.random() * 2;
|
||||
tileElem.style.animationDuration = duration + 's';
|
||||
|
||||
// Rotation aléatoire à droite ou à gauche
|
||||
const rotation = Math.random() * 720 - 360;
|
||||
const direction = Math.random() > 0.5 ? 1 : -1;
|
||||
tileElem.style.setProperty('--rotation', (rotation * direction) + 'deg');
|
||||
|
||||
container.appendChild(tileElem);
|
||||
|
||||
setTimeout(() => tileElem.remove(), duration * 1000);
|
||||
|
|
|
|||
Loading…
Reference in a new issue