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