// ---- helper for progress bar ---- const progressBar = document.getElementById('progressBar'); function updateProgressBar() const winScroll = window.scrollY; const height = document.documentElement.scrollHeight - window.innerHeight; const scrolled = (winScroll / height) * 100; if(progressBar) progressBar.style.width = scrolled + '%'; window.addEventListener('scroll', updateProgressBar); updateProgressBar();
/* ensure scenes look distinct */ .scene-1 background: radial-gradient(circle at 20% 30%, #10131c, #030507); .scene-2 background: radial-gradient(circle at 80% 70%, #121824, #020408); .scene-3 background: radial-gradient(circle at 40% 50%, #0f1420, #010101); .scene-4 background: radial-gradient(circle at 70% 20%, #1a142b, #02010a); scroll magic mouse windows
<!-- SCENE 2 - Parallax + Rotation effect --> <section class="scene scene-2" id="scene2"> <div class="card" id="card2"> <h2 id="rotateText">⚡ Parallax Power ⚡</h2> <p>This card rotates and scales as you scroll through the scene.<br>ScrollMagic synchronizes exactly with your mouse wheel on Windows.</p> <div class="animated-box" id="magicBox"></div> <div class="badge">rotation + scale + box color shift</div> </div> </section> // ---- helper for progress bar ---- const
/* fixed navigation indicator */ .progress-container position: fixed; top: 0; left: 0; width: 100%; height: 4px; background: rgba(255, 106, 61, 0.2); z-index: 100; .progress-bar height: 4px; background: #ff6a3d; width: 0%; box-shadow: 0 0 8px #ff6a3d; transition: width 0.08s linear; if(progressBar) progressBar.style.width = scrolled + '%'