fix: restart icon animations from top on page refresh
Add animation restart mechanism using React key prop to ensure tea icons always begin their falling animation from the top of the viewport when the page is refreshed, providing a consistent user experience. Changes: - Add useState and useEffect to manage animation restart - Set unique key based on timestamp on component mount - Icons container remounts on each page load, resetting CSS animations - All 35 tea icons now restart their descent from -100vh on refresh 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
510eab7794
commit
7e079dfede
10
app/page.tsx
10
app/page.tsx
|
|
@ -7,8 +7,16 @@ import CountdownTimer from "@/components/CountdownTimer";
|
|||
import GamePeriod from "@/components/GamePeriod";
|
||||
import GrandPrize from "@/components/GrandPrize";
|
||||
import AboutContest from "@/components/AboutContest";
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
export default function HomePage() {
|
||||
const [animationKey, setAnimationKey] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
// Redémarrer l'animation à chaque chargement de la page
|
||||
setAnimationKey(Date.now());
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen -mt-[4.5rem] relative">
|
||||
{/* Background avec icônes de thé */}
|
||||
|
|
@ -17,7 +25,7 @@ export default function HomePage() {
|
|||
<div className="absolute inset-0 bg-gradient-to-br from-[#fdfcf8] via-[#f8f6f0] to-[#f0ede5]"></div>
|
||||
|
||||
{/* Icônes de thé dispersées avec animation de descente - 35 icônes */}
|
||||
<div className="absolute inset-0 opacity-[0.5]">
|
||||
<div key={animationKey} className="absolute inset-0 opacity-[0.5]">
|
||||
{/* Ligne 1 - 5 icons */}
|
||||
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[5%] left-[10%] animate-float-gentle" style={{animationDelay: '0s', animationDuration: '28s'}} />
|
||||
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[7%] left-[30%] animate-float-gentle" style={{animationDelay: '3s', animationDuration: '32s'}} />
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user