Animation Zoom Slide Pro

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Animation Zoom Slide Pro</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            body {
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                min-height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 20px;
                overflow-x: hidden;
            }

            .container {
                max-width: 1200px;
                width: 100%;
            }

            .hero {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 60px;
                align-items: center;
                background: rgba(255, 255, 255, 0.95);
                padding: 60px;
                border-radius: 20px;
                box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            }

            .hero-content h1 {
                font-size: 3.5rem;
                color: #2d3748;
                margin-bottom: 20px;
                animation: fadeInUp 1s ease-out forwards;
                opacity: 0;
            }

            .hero-content p {
                font-size: 1.2rem;
                color: #4a5568;
                line-height: 1.8;
                margin-bottom: 30px;
                animation: fadeInUp 1.2s ease-out forwards;
                opacity: 0;
            }

            .hero-content button {
                padding: 15px 40px;
                font-size: 1.1rem;
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                color: white;
                border: none;
                border-radius: 50px;
                cursor: pointer;
                transition:
                    transform 0.3s ease,
                    box-shadow 0.3s ease;
                animation: fadeInUp 1.4s ease-out forwards;
                opacity: 0;
            }

            .hero-content button:hover {
                transform: translateY(-3px);
                box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
            }

            /* Animation Zoom + Slide combinée */
            .hero-image {
                animation: zoomSlideIn 2s ease-out forwards;
                opacity: 0;
            }

            .hero-image img {
                width: 100%;
                height: auto;
                border-radius: 15px;
                box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
            }

            /* Définition des animations */
            @keyframes zoomSlideIn {
                0% {
                    opacity: 0;
                    transform: translateX(100px) scale(0.7);
                }
                60% {
                    opacity: 1;
                    transform: translateX(-10px) scale(1.05);
                }
                100% {
                    opacity: 1;
                    transform: translateX(0) scale(1);
                }
            }

            @keyframes fadeInUp {
                from {
                    opacity: 0;
                    transform: translateY(30px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            /* Variantes d'animations (boutons de démo) */
            .demo-section {
                margin-top: 60px;
                text-align: center;
            }

            .demo-section h2 {
                color: white;
                margin-bottom: 30px;
                font-size: 2rem;
            }

            .animation-demos {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                gap: 30px;
                margin-top: 30px;
            }

            .demo-box {
                background: white;
                padding: 40px 20px;
                border-radius: 15px;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
                cursor: pointer;
                transition: transform 0.3s ease;
            }

            .demo-box:hover {
                transform: translateY(-5px);
            }

            .demo-box h3 {
                margin-bottom: 15px;
                color: #2d3748;
            }

            .demo-image {
                width: 150px;
                height: 150px;
                margin: 0 auto;
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                border-radius: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: white;
                font-size: 3rem;
                font-weight: bold;
            }

            /* Animations variantes */
            .zoom-bounce {
                animation: zoomBounce 2s ease-out forwards;
                opacity: 0;
            }

            @keyframes zoomBounce {
                0% {
                    opacity: 0;
                    transform: translateX(100px) scale(0.5);
                }
                50% {
                    opacity: 1;
                    transform: translateX(-20px) scale(1.1);
                }
                70% {
                    transform: translateX(10px) scale(0.95);
                }
                100% {
                    opacity: 1;
                    transform: translateX(0) scale(1);
                }
            }

            .zoom-rotate {
                animation: zoomRotate 2s ease-out forwards;
                opacity: 0;
            }

            @keyframes zoomRotate {
                0% {
                    opacity: 0;
                    transform: translateX(150px) scale(0.3) rotate(-45deg);
                }
                100% {
                    opacity: 1;
                    transform: translateX(0) scale(1) rotate(0deg);
                }
            }

            .zoom-fade-slide {
                animation: zoomFadeSlide 2.5s ease-out forwards;
                opacity: 0;
            }

            @keyframes zoomFadeSlide {
                0% {
                    opacity: 0;
                    transform: translateX(200px) translateY(-50px) scale(0.6);
                }
                60% {
                    opacity: 0.8;
                    transform: translateX(-15px) translateY(10px) scale(1.08);
                }
                100% {
                    opacity: 1;
                    transform: translateX(0) translateY(0) scale(1);
                }
            }

            .reset-btn {
                margin-top: 30px;
                padding: 15px 40px;
                font-size: 1.1rem;
                background: white;
                color: #667eea;
                border: 2px solid white;
                border-radius: 50px;
                cursor: pointer;
                transition: all 0.3s ease;
            }

            .reset-btn:hover {
                background: transparent;
                color: white;
            }

            @media (max-width: 768px) {
                .hero {
                    grid-template-columns: 1fr;
                    gap: 40px;
                    padding: 40px 30px;
                }

                .hero-content h1 {
                    font-size: 2.5rem;
                }

                .animation-demos {
                    grid-template-columns: 1fr;
                }
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="hero">
                <div class="hero-content">
                    <h1>Animation Zoom Pro</h1>
                    <p>
                        Découvrez des animations fluides et professionnelles qui combinent zoom, slide et effets spéciaux pour créer des expériences
                        visuelles captivantes.
                    </p>
                    <button>Découvrir Plus</button>
                </div>
                <div class="hero-image">
                    <img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=600&h=600&fit=crop" alt="Design moderne" />
                </div>
            </div>

            <div class="demo-section">
                <h2>Variantes d'Animations</h2>
                <div class="animation-demos">
                    <div class="demo-box" onclick="applyAnimation('zoomSlideIn')">
                        <h3>Zoom + Slide</h3>
                        <div class="demo-image" id="demo1">1</div>
                        <p style="margin-top: 15px; color: #4a5568;">Animation standard avec rebond</p>
                    </div>

                    <div class="demo-box" onclick="applyAnimation('zoomBounce')">
                        <h3>Zoom Bounce</h3>
                        <div class="demo-image" id="demo2">2</div>
                        <p style="margin-top: 15px; color: #4a5568;">Effet bounce dynamique</p>
                    </div>

                    <div class="demo-box" onclick="applyAnimation('zoomRotate')">
                        <h3>Zoom Rotate</h3>
                        <div class="demo-image" id="demo3">3</div>
                        <p style="margin-top: 15px; color: #4a5568;">Rotation pendant le zoom</p>
                    </div>

                    <div class="demo-box" onclick="applyAnimation('zoomFadeSlide')">
                        <h3>Zoom Fade Complex</h3>
                        <div class="demo-image" id="demo4">4</div>
                        <p style="margin-top: 15px; color: #4a5568;">Mouvement en diagonale</p>
                    </div>
                </div>

                <button class="reset-btn" onclick="resetAnimations()">Réinitialiser toutes les animations</button>
            </div>
        </div>

        <script>
            function applyAnimation(animationName) {
                const demoBoxes = document.querySelectorAll('.demo-image');
                demoBoxes.forEach((box, index) => {
                    box.style.animation = 'none';
                    box.offsetHeight; // Force reflow

                    if (box.id === `demo${['zoomSlideIn', 'zoomBounce', 'zoomRotate', 'zoomFadeSlide'].indexOf(animationName) + 1}`) {
                        box.style.animation = `${animationName} 2s ease-out forwards`;
                    }
                });
            }

            function resetAnimations() {
                const heroImage = document.querySelector('.hero-image');
                const demoBoxes = document.querySelectorAll('.demo-image');

                // Reset hero image
                heroImage.style.animation = 'none';
                heroImage.offsetHeight;
                heroImage.style.animation = 'zoomSlideIn 2s ease-out forwards';

                // Reset demo boxes
                demoBoxes.forEach((box, index) => {
                    box.style.animation = 'none';
                    box.offsetHeight;

                    const animations = ['zoomSlideIn', 'zoomBounce', 'zoomRotate', 'zoomFadeSlide'];
                    setTimeout(() => {
                        box.style.animation = `${animations[index]} 2s ease-out forwards`;
                    }, index * 200);
                });
            }

            // Animation initiale des démos
            window.addEventListener('load', () => {
                const demoBoxes = document.querySelectorAll('.demo-image');
                const animations = ['zoomSlideIn', 'zoomBounce', 'zoomRotate', 'zoomFadeSlide'];

                demoBoxes.forEach((box, index) => {
                    setTimeout(
                        () => {
                            box.style.animation = `${animations[index]} 2s ease-out forwards`;
                            box.style.opacity = '0';
                        },
                        2000 + index * 300,
                    );
                });
            });
        </script>
    </body>
</html>