Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Split Screen Scroll — Cinematic Module</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script> | |
| <style> | |
| :root{--bg:#0a0a0b;--text:#eae7e2;--muted:#5a5a5e;--accent:#4f46e5;--border:#1e1e22} | |
| *{margin:0;padding:0;box-sizing:border-box}body{background:var(--bg);color:var(--text);font-family:'Outfit',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden} | |
| .hero{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 24px} | |
| .hero-label{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:20px} | |
| .hero h1{font-size:clamp(32px,6vw,64px);font-weight:600;line-height:1.15;max-width:700px;letter-spacing:-.025em} | |
| .hero h1 span{color:var(--accent)} | |
| .hero p{margin-top:16px;font-size:18px;color:var(--muted);max-width:50ch;line-height:1.5} | |
| .split-section{position:relative;height:400vh} | |
| .split-sticky{position:sticky;top:0;height:100dvh;display:flex;overflow:hidden} | |
| .split-col{flex:1;overflow:hidden;position:relative} | |
| .split-col-inner{position:absolute;left:0;right:0;will-change:transform} | |
| .split-item{height:100vh;display:flex;align-items:center;justify-content:center;padding:40px;text-align:center} | |
| .split-item h3{font-size:clamp(24px,4vw,40px);font-weight:600;letter-spacing:-.02em;margin-bottom:8px} | |
| .split-item p{font-size:15px;color:var(--muted);max-width:30ch;line-height:1.5} | |
| .split-divider{width:1px;background:var(--border);flex-shrink:0} | |
| .left-1{background:#111118}.left-2{background:#0d1a12}.left-3{background:#1a0d12}.left-4{background:#121218} | |
| .right-1{background:#1a120d}.right-2{background:#0d1218}.right-3{background:#181212}.right-4{background:#12180d} | |
| .explain{padding:120px 24px;text-align:center;max-width:680px;margin:0 auto;border-top:1px solid #1a1a1d} | |
| .explain .tag{display:inline-block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);border:1px solid rgba(79,70,229,.15);padding:4px 12px;border-radius:100px;margin-bottom:20px} | |
| .explain h2{font-size:clamp(24px,4vw,40px);font-weight:600;letter-spacing:-.02em;margin-bottom:16px} | |
| .explain p{font-size:17px;color:var(--muted);line-height:1.6} | |
| footer{border-top:1px solid #1a1a1d;padding:24px;text-align:center;font-size:12px;color:var(--muted)} | |
| @media(max-width:768px){.split-sticky{flex-direction:column}.split-col{flex:none;height:50vh}.split-divider{width:100%;height:1px}} | |
| </style> | |
| </head> | |
| <body> | |
| <section class="hero"> | |
| <div class="hero-label">Module 08 — Split Screen Scroll</div> | |
| <h1>Two halves scroll in <span>opposite directions</span></h1> | |
| <p>Left column scrolls down while right column scrolls up. Creates a visual tension that keeps eyes moving. Great for comparisons, before/after, or dual narratives.</p> | |
| </section> | |
| <section class="split-section"> | |
| <div class="split-sticky"> | |
| <div class="split-col"><div class="split-col-inner" id="leftCol"> | |
| <div class="split-item left-1"><div><h3>Strategy</h3><p>Research, positioning, competitive analysis</p></div></div> | |
| <div class="split-item left-2"><div><h3>Design</h3><p>Wireframes, prototypes, visual systems</p></div></div> | |
| <div class="split-item left-3"><div><h3>Build</h3><p>Production code, testing, deployment</p></div></div> | |
| <div class="split-item left-4"><div><h3>Scale</h3><p>Analytics, optimisation, growth loops</p></div></div> | |
| </div></div> | |
| <div class="split-divider"></div> | |
| <div class="split-col"><div class="split-col-inner" id="rightCol"> | |
| <div class="split-item right-1"><div><h3>Discovery</h3><p>Understand the problem before solving it</p></div></div> | |
| <div class="split-item right-2"><div><h3>Architecture</h3><p>Information structure, user flows, edge cases</p></div></div> | |
| <div class="split-item right-3"><div><h3>Launch</h3><p>Go-to-market, monitoring, first users</p></div></div> | |
| <div class="split-item right-4"><div><h3>Iterate</h3><p>Data-driven improvements, sprint cycles</p></div></div> | |
| </div></div> | |
| </div> | |
| </section> | |
| <section class="explain"> | |
| <div class="tag">Why it works</div> | |
| <h2>Visual counterpoint</h2> | |
| <p>Opposite motion creates tension and interest. The visitor's eye bounces between the two columns, ensuring both sides get attention. Comparison pages, dual narratives (problem/solution), and portfolio before/after flows benefit from this pattern.</p> | |
| </section> | |
| <footer>Cinematic Module — Split Screen Scroll</footer> | |
| <script> | |
| (function(){ | |
| gsap.registerPlugin(ScrollTrigger); | |
| var s=document.querySelector('.split-section'); | |
| var itemH=window.innerHeight;var count=4; | |
| gsap.to('#leftCol',{y:-(count-1)*itemH,ease:'none',scrollTrigger:{trigger:s,start:'top top',end:'bottom bottom',scrub:.3}}); | |
| gsap.fromTo('#rightCol',{y:-(count-1)*itemH},{y:0,ease:'none',scrollTrigger:{trigger:s,start:'top top',end:'bottom bottom',scrub:.3}}); | |
| })(); | |
| </script> | |
| <div style="position:fixed;bottom:0;left:0;right:0;padding:8px 16px;font-size:11px;color:#5a5a5e;text-align:center;z-index:99;background:rgba(9,9,11,.85);backdrop-filter:blur(8px);border-top:1px solid #1e1e22;font-family:Outfit,sans-serif">© Created by Jay from <a href="https://robonuggets.com" style="color:#e8793a;text-decoration:none">RoboLabs</a>. Learn more at <a href="https://robonuggets.com" style="color:#e8793a;text-decoration:none">RoboNuggets</a></div> | |
| </body> | |
| </html> | |