| <!-- This is a recreation of Unfold's (https://dribbble.com/unfold) parallax scene: https://cdn.dribbble.com/users/14268/screenshots/3275340/northface.gif --> | |
| <div class="scrollDist"></div> | |
| <div class="main"> | |
| <svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg"> | |
| <mask id="m"> | |
| <g class="cloud1"> | |
| <rect fill="#fff" width="100%" height="801" y="799" /> | |
| <image xlink:href="https://assets.codepen.io/721952/cloud1Mask.jpg" width="1200" height="800"/> | |
| </g> | |
| </mask> |
| <div class="hero"> | |
| <div class="parallax-layer layer-6"></div> | |
| <div class="parallax-layer layer-5"></div> | |
| <div class="parallax-layer layer-4"></div> | |
| <div class="parallax-layer bike-1"></div> | |
| <div class="parallax-layer bike-2"></div> | |
| <div class="parallax-layer layer-3"></div> | |
| <div class="parallax-layer layer-2"></div> | |
| <div class="parallax-layer layer-1"></div> | |
| </div> |
Convert a plain stack of images to an immersive, 3D/parallax scrolling gallery, with GSAP.js. Plus a little DrawSVG to start/finish the dynamically generated timeline.
Featured on Frontend Horse! Watch the video walk-through here: https://www.youtube.com/watch?v=JmYxiTW671g
A Pen by Tom Miller on CodePen.
Convert a plain stack of images to an immersive, 3D/parallax scrolling gallery, with GSAP.js. Plus a little DrawSVG to start/finish the dynamically generated timeline.
Featured on Frontend Horse! Watch the video walk-through here: https://www.youtube.com/watch?v=JmYxiTW671g
A Pen by Tom Miller on CodePen.
| <a href="" class="btn-whatsapp-pulse"> | |
| <i class="fab fa-whatsapp"></i> | |
| </a> | |
| <a href="" class="btn-whatsapp-pulse btn-whatsapp-pulse-border"> | |
| <i class="fab fa-whatsapp"></i> | |
| </a> |
| <div class="wa__btn_popup"> | |
| <div class="wa__btn_popup_txt">Precisa de ajuda? <strong>Converse conosco</strong></div> | |
| <div class="wa__btn_popup_icon"></div> | |
| </div> | |
| <div class="wa__popup_chat_box"> | |
| <div class="wa__popup_heading"> | |
| <div class="wa__popup_title">Comece uma conversa</div> | |
| <div class="wa__popup_intro">Oi! Clique em um dos nossos membros abaixo para conversar no <strong>WhatsApp ;)</strong> |
| <div class="container"> | |
| <div id="rgbKineticSlider" class="rgbKineticSlider"></div> | |
| <a href="#" class="menu"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> | |
| <path stroke="none" d="M0 0h24v24H0z" fill="none"/> | |
| <line x1="4" y1="8" x2="40" y2="8" /> | |
| <line x1="0" y1="16" x2="40" y2="16" /> | |
| </svg> | |
| </a> | |
| <div class="wrapper"> |
| <div class="container"> | |
| <div id="rgbKineticSlider" class="rgbKineticSlider"></div> | |
| <a href="#" class="menu"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> | |
| <path stroke="none" d="M0 0h24v24H0z" fill="none"/> | |
| <line x1="4" y1="8" x2="40" y2="8" /> | |
| <line x1="0" y1="16" x2="40" y2="16" /> | |
| </svg> | |
| </a> | |
| <div class="wrapper"> |
| <div class="ag-timeline-block"> | |
| <div class="ag-timeline_title-box"> | |
| <div class="ag-timeline_tagline">Timeline</div> | |
| <div class="ag-timeline_title">No Flex</div> | |
| </div> | |
| <section class="ag-section"> | |
| <div class="ag-format-container"> | |
| <div class="js-timeline ag-timeline"> | |
| <div class="js-timeline_line ag-timeline_line"> | |
| <div class="js-timeline_line-progress ag-timeline_line-progress"></div> |