After vectors are split and turned into layers, GreenSock ScrollTrigger is used for the parallax effect.
Note: Please, do not use it in profit-making platforms and projects without permission.
A Pen by Ecem Gokdogan on CodePen.
Created
July 18, 2024 00:58
-
-
Save a-kyselova/e6e758bb140a3e06e197ca977cce6137 to your computer and use it in GitHub Desktop.
Parallax Effect
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
| <body> | |
| <header> | |
| <a href="#" class="logo">Logo</a> | |
| <ul class="navigation"> | |
| <li><a href="#" class="active">Home</a></li> | |
| <li><a href="#">About</a></li> | |
| <li><a href="#">Events</a></li> | |
| <li><a href="#">Contact</a></li> | |
| </ul> | |
| </header> | |
| <section class="parallax"> | |
| <h1 id="title">Sunset Paradise</h1> | |
| <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/22735710-8cec-41c3-856a-32fb20242e99" id="bottom" alt="vacation" /> | |
| <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/3afe3065-7d00-4575-b308-34eba3611d53" id="woman" alt="vacation" /> | |
| <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/52d5bbe0-1760-4b44-a455-b443c1e6181c" id="leftplant" alt="vacation" /> | |
| <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/d6b48ee4-151b-49e8-b547-82de1ebe053d" id="rightplant" alt="vacation" /> | |
| <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/447910c7-b347-4a2d-b72a-6112efd5a69f" id="ball" alt="vacation" /> | |
| <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/f8acf376-2ffe-418d-af72-9d8da6130a6f" id="lifebuoy" alt="vacation" /> | |
| </section> | |
| <section class="blog"> | |
| <h2>Your Ultimate Beach Escape!</h2> | |
| <p>Are you ready to embark on a beach adventure like no other?</p> | |
| <p> | |
| Look no further than Sunset Paradise, the jewel in the crown of our | |
| beachfront paradise collection! With pristine shores, crystal-clear | |
| waters, and a plethora of activities to indulge in, Sunset Paradise is | |
| your ticket to sun-soaked bliss. 🏖️ | |
| </p> | |
| <div class="cards"> | |
| <div class="card"> | |
| <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/db0b1567-8d28-49c1-8687-7a982c594140" alt="" /> | |
| <div class="overlay"> | |
| <h3>Unspoiled Beauty</h3> | |
| <p> | |
| Nestled along the serene coastline, Sunset Paradise boasts unspoiled natural beauty that will take your breath away. Picture yourself strolling along powdery white sands, feeling the gentle caress of the sea breeze, and marveling at the azure waters stretching as far as the eye can see. It's a sight that will awaken your senses and soothe your soul. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/1ee42860-8dba-452d-91c5-6cfb9763b29e" alt="" /> | |
| <div class="overlay"> | |
| <h3>Endless Adventures</h3> | |
| <p> | |
| For the adventurous spirit in you, Sunset Paradise offers a treasure trove of thrilling activities. Dive into the depths of the ocean for an unforgettable snorkeling experience, where colorful marine life dances beneath the surface. Hop on a paddleboard and glide through tranquil waters, or ride the waves with our expert surf instructors. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/a18e223f-28a1-4ae2-9068-ffe6157a4988" alt="" /> | |
| <div class="overlay"> | |
| <h3>Savor the Flavor</h3> | |
| <p> | |
| Indulge your taste buds with delectable cuisine served right on the beach. Our beachfront restaurants offer a delightful fusion of local flavors and international cuisines, prepared with fresh, locally-sourced ingredients. Sip on exotic cocktails while watching the sunset, and savor every moment of culinary delight in this tropical haven. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <p> | |
| Join us at Sunset Paradise and let the magic of the beach whisk you away | |
| to a world of sun, sea, and smiles! 🏝️✨ | |
| </p> | |
| </section> | |
| </body> |
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 split = new SplitText("#title"); | |
| gsap.from("#woman", { | |
| scrollTrigger: { | |
| scrub: true, | |
| }, | |
| y: 50, | |
| }); | |
| gsap.from("#leftplant", { | |
| scrollTrigger: { | |
| scrub: true, | |
| }, | |
| x: -150, | |
| }); | |
| gsap.from("#rightplant", { | |
| scrollTrigger: { | |
| scrub: true, | |
| }, | |
| x: 150, | |
| }); | |
| gsap.from("#ball", { | |
| scrollTrigger: { | |
| scrub: true, | |
| }, | |
| x: -200, | |
| }); | |
| gsap.from("#lifebuoy", { | |
| scrollTrigger: { | |
| scrub: true, | |
| }, | |
| x: 200, | |
| }); | |
| gsap | |
| .timeline({ | |
| scrollTrigger: { | |
| trigger: ".parallax", | |
| start: "top 50%", | |
| end: "bottom top", | |
| toggleActions: "restart none none reset", | |
| }, | |
| }) | |
| .from(split.chars, { | |
| yPercent: -150, | |
| stagger: 0.05, | |
| duration: 0.7, | |
| ease: "back", | |
| }) | |
| .from(split.chars, { opacity: 0, delay: 0.05, stagger: 0.05, duration: 0.2 }, 0); |
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
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script> | |
| <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText3.min.js"></script> |
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=Comfortaa:wght@300;400;500;600;700&family=Mooli&display=swap"); | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| h1, | |
| h2, | |
| h3 { | |
| font-family: "Comfortaa", cursive; | |
| } | |
| body { | |
| min-height: 100dvh; | |
| overflow-x: hidden; | |
| background: #fff; | |
| font-family: "Mooli", sans-serif; | |
| } | |
| header { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| padding: 30px 100px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| z-index: 100; | |
| } | |
| .logo { | |
| color: #112434; | |
| font-weight: 700; | |
| font-size: clamp(1.1rem, 6vw, 1.7rem); | |
| text-decoration: none; | |
| } | |
| .navigation { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .navigation li { | |
| list-style: none; | |
| margin-left: 20px; | |
| } | |
| .navigation li a { | |
| text-decoration: none; | |
| padding: 6px 15px; | |
| color: #112434; | |
| border-radius: 20px; | |
| font-size: clamp(0.9rem, 6vw, 1rem); | |
| } | |
| .navigation li a:hover, | |
| .navigation li a.active { | |
| background: #112434; | |
| color: #fff; | |
| } | |
| .parallax { | |
| position: relative; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 150dvh; | |
| background: rgb(206, 245, 223); | |
| background: radial-gradient( | |
| circle, | |
| rgba(206, 245, 223, 0.4) 34%, | |
| rgba(206, 245, 223, 1) 68% | |
| ); | |
| } | |
| .parallax img { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| pointer-events: none; | |
| } | |
| #title { | |
| position: absolute; | |
| top: 13%; | |
| font-size: clamp(2rem, 6vw, 4rem); | |
| color: #000; | |
| z-index: 50; | |
| } | |
| .blog { | |
| position: relative; | |
| padding: 120px 150px 20px; | |
| background: #f6f0e7; | |
| } | |
| .blog::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 50px; | |
| background: rgb(246, 240, 231); | |
| background: radial-gradient( | |
| circle, | |
| rgba(246, 240, 231, 1) 54%, | |
| rgba(0, 114, 125, 1) 99% | |
| ); | |
| z-index: 999; | |
| } | |
| .blog h2 { | |
| font-size: clamp(2rem, 6vw, 3rem); | |
| color: #000; | |
| margin: 60px 0 40px; | |
| text-align: center; | |
| } | |
| .blog p { | |
| font-size: clamp(1rem, 6vw, 1.3rem); | |
| color: #000; | |
| font-weight: 400; | |
| margin-bottom: 30px; | |
| text-align: center; | |
| line-height: 1.5; | |
| } | |
| .cards { | |
| display: grid; | |
| align-items: center; | |
| justify-items: center; | |
| grid-template-columns: 1fr; | |
| gap: 40px; | |
| padding: 60px 60px; | |
| background: #f6f0e7; | |
| } | |
| .card { | |
| position: relative; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| width: min(100%, 450px); | |
| background-color: #fff; | |
| box-shadow: 0 6px 30px rgba(0, 0, 0, 0.3); | |
| border-radius: 20px; | |
| padding: 30px 40px; | |
| } | |
| .card img { | |
| display: block; | |
| width: 100%; | |
| max-width: 250px; | |
| aspect-ratio: 1/1; | |
| margin: 20px; | |
| } | |
| .card h3 { | |
| font-size: 1.4rem; | |
| font-weight: 700; | |
| margin: 20px 0 20px; | |
| text-align: center; | |
| color: #000; | |
| } | |
| .card p { | |
| font-size: 1rem; | |
| text-align: justify; | |
| line-height: 1.5; | |
| color: #000; | |
| } | |
| .overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| background: linear-gradient( | |
| to bottom, | |
| rgba(206, 245, 223, 0.9), | |
| rgba(164, 209, 198, 0.9), | |
| rgba(128, 173, 172, 0.9), | |
| rgba(72, 161, 170, 0.9) | |
| ); | |
| border-radius: 20px; | |
| list-style: none; | |
| z-index: 1; | |
| opacity: 0; | |
| padding: 20px 40px; | |
| transition: all 0.4s ease-in-out; | |
| } | |
| .overlay:hover { | |
| opacity: 1; | |
| cursor: default; | |
| } | |
| @media (max-width: 1300px) { | |
| header { | |
| padding: 30px 50px; | |
| } | |
| #title { | |
| top: 16%; | |
| } | |
| .parallax { | |
| height: 120dvh; | |
| } | |
| .blog { | |
| padding: 100px 120px 20px; | |
| } | |
| } | |
| @media (max-width: 900px) { | |
| .navigation li { | |
| margin-left: 10px; | |
| } | |
| .parallax { | |
| height: 100dvh; | |
| } | |
| #title { | |
| top: 20%; | |
| } | |
| .blog { | |
| padding: 90px 100px 20px; | |
| } | |
| .cards { | |
| padding: 40px 40px; | |
| } | |
| .card h3 { | |
| margin: 20px 0 20px; | |
| } | |
| } | |
| @media (max-width: 600px) { | |
| .navigation li { | |
| margin-left: 5px; | |
| } | |
| header { | |
| padding: 30px 10px; | |
| } | |
| #title { | |
| top: 40%; | |
| } | |
| .blog { | |
| padding: 90px 40px 20px; | |
| } | |
| .blog p { | |
| font-size: 1rem; | |
| } | |
| .card { | |
| width: min(100%, 450px); | |
| } | |
| .card h3 { | |
| font-size: 1.2rem; | |
| } | |
| .card p { | |
| font-size: 0.85rem; | |
| text-align: unset; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment