A Pen by Vashon Gonzales on CodePen.
Created
December 8, 2022 06:03
-
-
Save VashonG/ee7c7834582842f94792efd6f308c933 to your computer and use it in GitHub Desktop.
Parallax Scrolling Landing Page
This file contains 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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Parallax Scrolling Effect with CSS & Vanilla Javascript</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <header> | |
| <a href="#" class="logo">LOGO</a> | |
| <ul> | |
| <li><a href="#" class="active">Home</a></li> | |
| <li><a href="#">About</a></li> | |
| <li><a href="#">Work</a></li> | |
| <li><a href="#">Contact</a></li> | |
| </ul> | |
| </header> | |
| <section> | |
| <img src="https://mohamed-sayed-elmahdy.github.io/Parallax-Scrolling-Effect/images/stars.png" id="stars" > | |
| <img src="https://mohamed-sayed-elmahdy.github.io/Parallax-Scrolling-Effect/images/moon.png" id="moon" > | |
| <img src="https://mohamed-sayed-elmahdy.github.io/Parallax-Scrolling-Effect/images/mountains_behind.png" id="mountains_behind" > | |
| <h2 id="text">Moon Light</h2> | |
| <a href="#sec" id="explore">Explore</a> | |
| <img src="https://mohamed-sayed-elmahdy.github.io/Parallax-Scrolling-Effect/images/mountains_front.png" id="mountains_front"> | |
| </section> | |
| <div class="sec" id="sec"> | |
| <h2>Parallax Scrolling Effect</h2> | |
| <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem quod vel eveniet repellendus? | |
| Consequuntur laudantium facere delectus sint a, doloremque cumque. Optio praesentium repellat perferendis nisi totam aliquid illo magnam!, | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit.Dignissimos recusandae at minima dolores, et laborum quod.Atque sit quis id, | |
| commodi ipsa reprehenderit ipsam, ullam ipsum vel odio, consequatur recusandae. Lorem ipsum dolor sit amet consectetur adipisicing elit. | |
| Atque aut necessitatibus nostrum nemo velit deleniti saepe nulla,similique vero consequatur adipisci nam facere quo doloremque molestias. | |
| Dignissimos praesentium fuga earum. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ratione, veniam, dicta culpa cumque possimus | |
| iste quaerat odit nisi distinctio deleniti cum odio necessitatibus, quidem excepturi soluta hic corrupti molestias similique. <br><br> | |
| Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem quod vel eveniet repellendus?Consequuntur laudantium facere delectus sint a, | |
| doloremque cumque. Optio praesentium repellat perferendis nisi totam aliquid illo magnam!,Lorem ipsum dolor sit amet consectetur adipisicing elit. | |
| Dignissimos recusandae at minima dolores, et laborum quod.Atque sit quis id, commodi ipsa reprehenderit ipsam, ullam ipsum vel odio, consequatur recusandae. | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit.Atque aut necessitatibus nostrum nemo velit deleniti saepe nulla,similique vero consequatur adipisci | |
| nam facere quo doloremque molestias.Dignissimos praesentium fuga earum. Lorem ipsum, dolor sit amet consectetur adipisicing elit.<br><br> | |
| Consequuntur laudantium facere delectus sint a, doloremque cumque. Optio praesentium repellat perferendis nisi totam aliquid illo magnam!, | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit.Dignissimos recusandae at minima dolores, et laborum quod.Atque sit quis id, | |
| commodi ipsa reprehenderit ipsam, ullam ipsum vel odio, consequatur recusandae. Lorem ipsum dolor sit amet consectetur adipisicing elit. | |
| Atque aut necessitatibus nostrum nemo velit deleniti saepe nulla,similique vero consequatur adipisci nam facere quo doloremque molestias. | |
| Dignissimos praesentium fuga earum. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ratione, veniam, dicta culpa cumque possimus | |
| iste quaerat odit nisi distinctio deleniti cum odio necessitatibus, quidem excepturi soluta hic corrupti molestias similique. <br><br> | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit.Atque aut necessitatibus nostrum nemo velit deleniti saepe nulla,similique vero consequatur adipisci | |
| nam facere quo doloremque molestias.Dignissimos praesentium fuga earum. Lorem ipsum, dolor sit amet consectetur adipisicing elit.<br><br> | |
| Consequuntur laudantium facere delectus sint a, doloremque cumque. Optio praesentium repellat perferendis nisi totam aliquid illo magnam!, | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit.Dignissimos recusandae at minima dolores, et laborum quod.Atque sit quis id, | |
| commodi ipsa reprehenderit ipsam, ullam ipsum vel odio, consequatur recusandae. Lorem ipsum dolor sit amet consectetur adipisicing elit. | |
| Atque aut necessitatibus nostrum nemo velit deleniti saepe nulla,similique vero consequatur adipisci nam facere quo doloremque molestias. | |
| Dignissimos praesentium fuga earum. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ratione, veniam, dicta culpa cumque possimus | |
| iste quaerat odit nisi distinctio deleniti cum odio necessitatibus, quidem excepturi soluta hic corrupti molestias similique.</p> | |
| </div> | |
| <script src="js.js"></script> | |
| </body> | |
| </html> |
This file contains 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
| let stars = document.getElementById('stars'); | |
| let moon = document.getElementById('moon'); | |
| let mountains_behind = document.getElementById('mountains_behind'); | |
| let text = document.getElementById('text'); | |
| let mountains_front = document.getElementById('mountains_front'); | |
| let header = document.querySelector('header'); | |
| let explore = document.getElementById('explore'); | |
| window.addEventListener('scroll', function(){ | |
| let value = window.scrollY; | |
| stars.style.left = value * 0.25 + 'px'; | |
| moon.style.top = value * 1.05 + 'px'; | |
| mountains_behind.style.top = value * 0.5 + 'px'; | |
| mountains_behind.style.top = value * 0.5 + 'px'; | |
| text.style.marginRight = value * 3 + 'px'; | |
| explore.style.marginRight = value * 1 + 'px'; | |
| header.style.top = value * 0.5 + 'px' | |
| }) |
This file contains 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 url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap'); | |
| * { | |
| font-family: 'Poppins', sans-serif; | |
| padding: 0; | |
| margin: 0; | |
| box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| min-height: 100vh; | |
| background: linear-gradient(#2b1055,#7597de); | |
| overflow-x: hidden; | |
| } | |
| ::-webkit-scrollbar { | |
| width: 20px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| box-shadow: inset 0 0 5px grey; | |
| background-color: rgb(98 123 191); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: rgb(172, 3, 172); | |
| border-radius: 10px; | |
| transition: 0.5s; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: rgb(85, 9, 85); | |
| } | |
| header { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| padding: 30px 100px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| z-index: 100; | |
| } | |
| header .logo { | |
| color: rgb(211, 2, 211); | |
| text-decoration: none; | |
| font-weight: 800; | |
| font-size: 2em; | |
| letter-spacing: 2px; | |
| } | |
| header ul { | |
| list-style: none; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| header ul li { | |
| margin-left: 40px; | |
| } | |
| header ul li a { | |
| color: white; | |
| text-decoration: none; | |
| padding: 6px 15px; | |
| border-radius: 25px; | |
| transition: 0.2s; | |
| } | |
| header ul li a:hover, | |
| header ul li a.active { | |
| background-color: rgb(126, 3, 126); | |
| color: white; | |
| } | |
| section { | |
| position: relative; | |
| width: 100%; | |
| height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| overflow: hidden; | |
| } | |
| section img { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| section img#moon { | |
| mix-blend-mode: screen; | |
| } | |
| section img#mountains_front{ | |
| z-index: 11; | |
| } | |
| #text { | |
| font-size: 9vw; | |
| position: absolute; | |
| right: -300px; | |
| color: white; | |
| white-space: nowrap; | |
| z-index: 1; | |
| } | |
| #explore { | |
| position: absolute; | |
| bottom: 35%; | |
| text-decoration: none; | |
| background-color: #fff; | |
| font-size: 1.5em; | |
| font-weight: 300; | |
| color: black; | |
| border-radius: 25px; | |
| padding: 8px 30px; | |
| z-index: 12; | |
| } | |
| #explore:hover { | |
| background-color: rgb(126, 3, 126) | |
| } | |
| .sec { | |
| position: relative; | |
| padding: 100px; | |
| background-color: #1c0522; | |
| } | |
| .sec h2 { | |
| color: white; | |
| font-size: 3em; | |
| margin-bottom: 15px; | |
| } | |
| .sec p { | |
| color: white; | |
| font-size: 1em; | |
| } | |
| section::before { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0%; | |
| background: linear-gradient(to top, #1c0522,transparent);; | |
| width: 100%; | |
| height: 150px; | |
| z-index: 13; | |
| } |
This file contains 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
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment