add parallax website

Author: solygambas

99-parallax website/index.html

@@ -17,17 +17,9 @@ <h4>yayavar</h4>
       </nav>
       <div class="container">
         <h2 class="main-title">Explore.</h2>
-        <img
-          src="https://i.ibb.co/dK5zQgY/background.png"
-          class="background"
-          alt=""
-        />
-        <img src="https://i.ibb.co/gwtNKDz/man.png" class="man" alt="" />
-        <img
-          src="https://i.ibb.co/XJrwv0M/foreground.png"
-          class="foreground"
-          alt=""
-        />
+        <img src="https://i.ibb.co/rsp6RFJ/bg1.png" class="background" alt="" />
+        <img src="https://i.ibb.co/237VsHs/girl1.png" class="girl" alt="" />
+        <img src="https://i.ibb.co/BKtjhV2/rock1.png" class="rock" alt="" />
       </div>
       <div class="content">
         <div class="content-images">

99-parallax website/script.js

@@ -0,0 +1,19 @@
+let controller = new ScrollMagic.Controller();
+let timeline = new TimelineMax();
+
+timeline
+  .to(".rock", 10, { y: -300 })
+  .to(".girl", 10, { y: -200 }, "-=10")
+  .fromTo(".background", { y: -50 }, { y: 0, duration: 10 }, "-=10")
+  .to(".content", 10, { top: "0%" }, "-=10")
+  .fromTo(".content-images", { opacity: 0 }, { opacity: 1, duration: 3 })
+  .fromTo(".text", { opacity: 0 }, { opacity: 1, duration: 3 });
+
+let scene = new ScrollMagic.Scene({
+  triggerElement: "section",
+  duration: "300%",
+  triggerHook: 0,
+})
+  .setTween(timeline)
+  .setPin("section")
+  .addTo(controller);

99-parallax website/style.css

@@ -56,3 +56,25 @@ nav {
   padding: 2rem 20rem;
   font-size: 1.1rem;
 }
+
+@media (max-width: 768px) {
+  nav,
+  .text {
+    padding: 2rem;
+    font-size: 1rem;
+    text-align: center;
+  }
+
+  .main-title {
+    font-size: 3rem;
+  }
+
+  .content-images {
+    flex-direction: column;
+  }
+
+  .content-images img {
+    max-width: 100%;
+    padding: 2rem 0 0.25rem;
+  }
+}

README.md

@@ -104,7 +104,7 @@
 | 96  | [Cloud Hosting Service](https://github.com/solygambas/html-css-fifty-projects/tree/master/96-cloud%20hosting%20service)                 | [Live Demo](https://codepen.io/solygambas/full/oNBrXYr)  |
 | 97  | [Terminal Style Landing Page](https://github.com/solygambas/html-css-fifty-projects/tree/master/97-terminal%20style%20landing%20page)   | [Live Demo](https://codepen.io/solygambas/full/BaWvXLG)  |
 | 98  | [Magazine Layout](https://github.com/solygambas/html-css-fifty-projects/tree/master/98-magazine%20layout)                               | [Live Demo](https://codepen.io/solygambas/full/OJpGMyj)  |
-| 99  | [Parallax Website](https://github.com/solygambas/html-css-fifty-projects/tree/master/99-parallax%20website)                             | [Live Demo](#)                                           |
+| 99  | [Parallax Website](https://github.com/solygambas/html-css-fifty-projects/tree/master/99-parallax%20website)                             | [Live Demo](https://codepen.io/solygambas/full/poeBdPr)  |
 
 This repository is mostly based on 2 courses by Brad Traversy (2020):