diff --git a/index.html b/index.html
index a2dd1e1..4832e1f 100644
--- a/index.html
+++ b/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);