Created
August 15, 2022 08:49
-
-
Save Dovineowuor/7b7b18451e7ef02d80dc3f8a59014865 to your computer and use it in GitHub Desktop.
Curve SVG Background Animation
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
| <body> | |
| <div class="svg-container"> | |
| <!-- I crated SVG with: https://codepen.io/anthonydugois/pen/mewdyZ --> | |
| <svg viewbox="0 0 800 400" class="svg"> | |
| <path id="curve" fill="#50c6d8" d="M 800 300 Q 400 350 0 300 L 0 0 L 800 0 L 800 300 Z"> | |
| </path> | |
| </svg> | |
| </div> | |
| <header> | |
| <h1>This is a header title</h1> | |
| <h3>Here you are, scroll down.</h3> | |
| </header> | |
| <main> | |
| <p>And the main section.</p> | |
| </main> | |
| <footer> | |
| <p>And, the footer.</p> | |
| <small>🕷 Wish you luck, <a href="http://armantaherian.com">Arman</a>.</small> | |
| </footer> | |
| </body> |
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
| (function() { | |
| // Variables | |
| var $curve = document.getElementById("curve"); | |
| var last_known_scroll_position = 0; | |
| var defaultCurveValue = 350; | |
| var curveRate = 3; | |
| var ticking = false; | |
| var curveValue; | |
| // Handle the functionality | |
| function scrollEvent(scrollPos) { | |
| if (scrollPos >= 0 && scrollPos < defaultCurveValue) { | |
| curveValue = defaultCurveValue - parseFloat(scrollPos / curveRate); | |
| $curve.setAttribute( | |
| "d", | |
| "M 800 300 Q 400 " + curveValue + " 0 300 L 0 0 L 800 0 L 800 300 Z" | |
| ); | |
| } | |
| } | |
| // Scroll Listener | |
| // https://developer.mozilla.org/en-US/docs/Web/Events/scroll | |
| window.addEventListener("scroll", function(e) { | |
| last_known_scroll_position = window.scrollY; | |
| if (!ticking) { | |
| window.requestAnimationFrame(function() { | |
| scrollEvent(last_known_scroll_position); | |
| ticking = false; | |
| }); | |
| } | |
| ticking = true; | |
| }); | |
| })(); |
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
| @import 'https://fonts.googleapis.com/css?family=Ubuntu:300, 400, 500, 700'; | |
| *, *:after, *:before { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .svg-container { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| left: 0; | |
| z-index: -1; | |
| } | |
| svg { | |
| path { | |
| transition: .1s; | |
| } | |
| &:hover path { | |
| d: path("M 800 300 Q 400 250 0 300 L 0 0 L 800 0 L 800 300 Z"); | |
| } | |
| } | |
| body { | |
| background: #fff; | |
| color: #333; | |
| font-family: 'Ubuntu', sans-serif; | |
| position: relative; | |
| } | |
| h3 { | |
| font-weight: 400; | |
| } | |
| header { | |
| color: #fff; | |
| padding-top: 10vw; | |
| padding-bottom: 30vw; | |
| text-align: center; | |
| } | |
| main { | |
| background: linear-gradient(to bottom, #ffffff 0%, #dddee1 100%); | |
| border-bottom: 1px solid rgba(0, 0, 0, .2); | |
| padding: 10vh 0 80vh; | |
| position: relative; | |
| text-align: center; | |
| overflow: hidden; | |
| &::after { | |
| border-right: 2px dashed #eee; | |
| content: ''; | |
| position: absolute; | |
| top: calc(10vh + 1.618em); | |
| bottom: 0; | |
| left: 50%; | |
| width: 2px; | |
| height: 100%; | |
| } | |
| } | |
| footer { | |
| background: #dddee1; | |
| padding: 5vh 0; | |
| text-align: center; | |
| position: relative; | |
| } | |
| small { | |
| opacity: .5; | |
| font-weight: 300; | |
| a { | |
| color: inherit; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment