Wave Scroll Animation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wave Scroll Animation</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(to bottom, #ffefba, #ffffff);
            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: wave 1.2s ease-in-out infinite;
        }
        @keyframes wave {
            0% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0); }
        }
        .section:nth-child(even) {
            background: #ff7e5f;
            color: #fff;
        }
        .section:nth-child(odd) {
            background: #feb47b;
            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>
        Feel the Wave Animation!
        <span class="emoji">🌊</span>
    </div>
    <div class="section">
        <span class="icon">🚀</span>
        Smooth Scrolling Effects!
        <span class="emoji">👇</span>
    </div>
    <div class="section">
        <span class="icon">💡</span>
        Creative and Unique
        <span class="emoji">✨</span>
    </div>
    <div class="section">
        <span class="icon">🔥</span>
        Experience the Difference!
        <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>

Wave Scroll Animation - MeggiTools