Flip Scroll Animation - MeggiTools
Run
Toggle Theme
Share Link
<!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>