Bounce Scroll Animation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bounce Scroll Animation</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(to bottom, #8e2de2, #4a00e0);
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }
        .section {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2rem;
            opacity: 0;
            transform: translateY(100px);
            transition: all 0.8s ease-out;
        }
        .section.visible {
            opacity: 1;
            transform: translateY(0);
            animation: bounce 1.5s ease-in-out infinite;
        }
        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }
        .section:nth-child(even) {
            background: #00c6ff;
            color: #fff;
        }
        .section:nth-child(odd) {
            background: #0072ff;
            color: #fff;
        }
        .icon {
            font-size: 3rem;
            margin-right: 1rem;
        }
        .emoji {
            font-size: 3rem;
            margin-left: 1rem;
        }
    </style>
</head>
<body>
    <div class="section">
        <span class="icon">🔵</span>
        Welcome to Bounce Scroll!
        <span class="emoji">⚡</span>
    </div>
    <div class="section">
        <span class="icon">🌟</span>
        Dynamic and Engaging
        <span class="emoji">👇</span>
    </div>
    <div class="section">
        <span class="icon">💫</span>
        Watch the Bounce Effect!
        <span class="emoji">✨</span>
    </div>
    <div class="section">
        <span class="icon">🔥</span>
        Scroll Down for More!
        <span class="emoji">😎</span>
    </div>
    <script>
        document.addEventListener('scroll', function() {
            const sections = document.querySelectorAll('.section');
            const triggerBottom = window.innerHeight / 5 * 4;
            sections.forEach(section => {
                const sectionTop = section.getBoundingClientRect().top;
                if(sectionTop < triggerBottom) {
                    section.classList.add('visible');
                } else {
                    section.classList.remove('visible');
                }
            });
        });
    </script>
</body>
</html>

Bounce Scroll Animation - MeggiTools