Yeah i like buttons me...
A Pen by Jürgen Leister on CodePen.
lorens-osman-dev
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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"> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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"> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
lorens-osman-dev
/ 3d-scrolling-gallery-timeline.markdown
Created
October 18, 2022 20:20
3D Scrolling Gallery/Timeline
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.
lorens-osman-dev
/ 3d-scrolling-gallery-timeline.markdown
Created
October 18, 2022 20:16
3D Scrolling Gallery/Timeline
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- 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> |
NewerOlder