Professional Scroll Animation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Professional Scroll Animation</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background: #f3f3f3;
            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);
        }
        .section:nth-child(even) {
            background: #4CAF50;
            color: #fff;
        }
        .section:nth-child(odd) {
            background: #2196F3;
            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 the Professional Scroll Animation!
        <span class="emoji">🎉</span>
    </div>
    <div class="section">
        <span class="icon">🚀</span>
        Scroll Down to Discover More!
        <span class="emoji">👇</span>
    </div>
    <div class="section">
        <span class="icon">💡</span>
        Innovative and Eye-Catching Designs
        <span class="emoji">✨</span>
    </div>
    <div class="section">
        <span class="icon">🔥</span>
        Stunning Animations Await!
        <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>

Professional Scroll Animation - MeggiTools