Flip Scroll Animation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flip Scroll Animation</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(to bottom, #fc4a1a, #f7b733);
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }
        .section {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2rem;
            opacity: 0;
            transform: rotateX(90deg);
            transition: all 0.8s ease-out;
        }
        .section.visible {
            opacity: 1;
            transform: rotateX(0);
        }
        .section:nth-child(even) {
            background: #ee0979;
            color: #fff;
        }
        .section:nth-child(odd) {
            background: #ff6a00;
            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>
        Flip Scroll Animation!
        <span class="emoji">🎉</span>
    </div>
    <div class="section">
        <span class="icon">🚀</span>
        Fluid and Unique
        <span class="emoji">👇</span>
    </div>
    <div class="section">
        <span class="icon">💡</span>
        Creativity in Motion
        <span class="emoji">✨</span>
    </div>
    <div class="section">
        <span class="icon">🔥</span>
        Scroll for Surprises!
        <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>

Flip Scroll Animation - MeggiTools