upd

poojitha-ch · Jan 8, 2024 · cd7be3c · cd7be3c
commit cd7be3c
Show file tree

Hide file tree

Showing 36 changed files with 1,036 additions and 0 deletions.
diff --git a/img/blue.jpg b/img/blue.jpg
diff --git a/img/green.jpg b/img/green.jpg
diff --git a/img/mediamodifier_image-fotor-bg-remover-20231214203017.png b/img/mediamodifier_image-fotor-bg-remover-20231214203017.png
diff --git a/img/mediamodifier_image.png b/img/mediamodifier_image.png
diff --git a/img/orange.jpeg b/img/orange.jpeg
diff --git a/img/purple.jpeg b/img/purple.jpeg
diff --git a/img/red.jpeg b/img/red.jpeg
diff --git a/img/silver.jpg b/img/silver.jpg
diff --git a/img/yellow.jpg b/img/yellow.jpg
diff --git a/img1/bbflow.png b/img1/bbflow.png
diff --git a/img1/blue.jpg b/img1/blue.jpg
diff --git a/img1/gaming.jpg b/img1/gaming.jpg
diff --git a/img1/green.jpg b/img1/green.jpg
diff --git a/img1/keyboard.jpeg b/img1/keyboard.jpeg
diff --git a/img1/keyboard.png b/img1/keyboard.png
diff --git a/img1/more.jpg b/img1/more.jpg
diff --git a/img1/orange.jpg b/img1/orange.jpg
diff --git a/img1/photos.jpg b/img1/photos.jpg
diff --git a/img1/pkey.jpg b/img1/pkey.jpg
diff --git a/img1/pkey.png b/img1/pkey.png
diff --git a/img1/pmouse.jpg b/img1/pmouse.jpg
diff --git a/img1/pmouse.png b/img1/pmouse.png
diff --git a/img1/purple.jpg b/img1/purple.jpg
diff --git a/img1/red1.jpg b/img1/red1.jpg
diff --git a/img1/safari.jpg b/img1/safari.jpg
diff --git a/img1/silver.jpg b/img1/silver.jpg
diff --git a/img1/silver1.jpg b/img1/silver1.jpg
diff --git a/img1/yellow.jpg b/img1/yellow.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>iMac</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.3/gsap.min.js" defer></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.3/ScrollTrigger.min.js" defer></script>
+    <script src="script.js" defer></script>
+    <script src="script1.js" defer></script>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="style2.css">
+    <link rel="stylesheet" href="style3.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Kalnia&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Anton&family=Kalnia&family=Rubik+Doodle+Shadow&display=swap" rel="stylesheet">
+    <script src="https://unpkg.com/split-type"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>
+    <script src="https://unpkg.com/split-type"></script>
+
+</head>
+
+<body>
+    <div class="body">
+        <div class="head1"><b>iMac</b>
+        <p id="b1">The world’s best all‑in‑one computer, now supercharged by the M3 chip. </p></div>
+
+    <img class="first" src="img\mediamodifier_image-fotor-bg-remover-20231214203017.png">
+</div>
+
+ <div class="wrapper">
+
+    <div class="container scrollx">
+        <section class="sec1 pin">
+            <span class="anim">Available in seven different colours</span>
+
+            <img class="col" src="img1\red1.jpg">
+            <h1 class="anim" style="color: rgb(209, 13, 13);">Red</h1>
+
+
+        </section>
+        <section class="sec2 pin">
+            <span class="anim">Available in seven different colours</span>
+
+
+            <img class="col anim" src="img1\blue.jpg">
+            <h1 class="anim" style="color: rgb(13, 13, 176);">Blue</h1>
+        </section>
+        <section class="sec3 pin">
+            <span class="anim">Available in seven different colours</span>
+
+
+            <img class="col anim" src="img1\yellow.jpg">
+            <h1 class="anim" style="color:rgb(244, 221, 51);">Yellow</h1></section>
+            <section class="sec3 pin">
+                <span class="anim">Available in seven different colours</span>
+
+
+                <img class="col anim" src="img1\green.jpg">
+                <h1 class="anim" style="color: rgb(7, 104, 57);">Green</h1></section>
+                <section class="sec3 pin">
+                    <span class="anim">Available in seven different colours</span>
+
+                    <img class="col anim" src="img1\silver1.jpg">
+                    <h1 class="anim" style="color: silver;">Silver</h1></section>
+                    <section class="sec3 pin">
+                        <span class="anim">Available in seven different colours</span>
+
+                        <img class="col anim" src="img1\orange.jpg">
+                        <h1 class="anim" style="color: rgb(251, 151, 12);">Orange</h1></section>
+                        <section class="sec3 pin">
+                            <span class="anim">Available in seven different colours</span>
+
+
+                            <img class="col anim" src="img1\purple.jpg">
+                            <h1 class="anim" style="color: rgb(102, 8, 153);">Purple</h1></section>
+
+
+    </div>
+</div>
+
+<div class="gallery">
+    <div class="left">
+        <div class="desktopContent">
+            <div class="desktopContentSection">
+                <h1>Safari</h1>
+                <p>The world’s fastest browser, Safari runs up to 30% faster.7 Create personalised profiles and securely share your passwords and passkeys.</p>
+            </div>
+            <div class="desktopContentSection">
+                <h1>Editing</h1>
+                <p>Fly through edits up to two times faster in Adobe Photoshop.9 And work with massive 100‑megapixel images without a hitch.</p>
+            </div>
+            <div class="desktopContentSection">
+                <h1>Gaming</h1>
+                <p>M3 makes gaming an absolute blast with up to 50% faster frame rates and hardware-accelerated ray tracing for more lifelike lighting and reflections.</p>
+
+            </div>
+            <div class="desktopContentSection">
+                <h1>And many more...</h1>
+                <p>Productivity apps like Microsoft Excel perform up to 30 percent faster.</p>
+            </div>
+
+        </div>
+    </div>
+
+    <div class="right">
+
+        <!-- mobile content -->
+        <div class="mobileContent">
+            <div class="mobilePhoto red"></div>
+            <h1>Safari</h1>
+                <p>The world’s fastest browser, Safari runs up to 30% faster.7 Create personalised profiles and securely share your passwords and passkeys.</p>
+
+            <div class="mobilePhoto green"></div>
+            <h1>Editing</h1>
+                <p>Fly through edits up to two times faster in Adobe Photoshop.9 And work with massive 100‑megapixel images without a hitch.</p>
+
+            <div class="mobilePhoto pink"></div>
+            <h1>Gaming</h1>
+            <p>M3 makes gaming an absolute blast with up to 50% faster frame rates and hardware-accelerated ray tracing for more lifelike lighting and reflections.</p>
+
+            <div class="mobilePhoto blue"></div>
+           <h1>And many more...</h1>
+                <p>Productivity apps like Microsoft Excel perform up to 30 percent faster.</p>
+        </div>
+
+        <!-- desktop content -->
+
+        <div class="desktopPhotos">
+            <div class="desktopPhoto red"></div>
+            <div class="desktopPhoto green"></div>
+            <div class="desktopPhoto pink"></div>
+            <div class="desktopPhoto blue"></div>
+        </div>
+
+    </div>
+
+</div>
+
+<div class="image-container">
+    <div class="hello">
+        <h1>iMac features a colour-matched keyboard, mouse, and trackpad</h1>
+      </div>
+    <div class="images">
+        <img class="i1" src="img1\pkey.png" alt="Zooming Image">
+        <img class="i2" src="img1\pmouse.png" alt="Zooming Image">
+    </div>
+</div>
+
+</body>
+
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,82 @@
+gsap.from('.first', {
+    x: 100,          // move image 100 pixels to the right
+    //rotation: 360,    // rotate image 360 degrees
+    scale: 1.5,       // scale image to 1.5 times its size
+    opacity: 1,     // set image opacity to 0.5
+    duration: 2,      // animation duration in seconds
+    ease: 'power2.inOut', // easing function
+    yoyo: true,
+    scrollTrigger: {
+        trigger: '.first',
+        start: 'top 100%',
+        end: 'bottom 20%',
+        scrub: 1,
+        markers: false,
+        toggleActions: 'play reverse play reverse',
+        onLoad: () => gsap.to('.first', { x: -100, duration: 2 }) // Play the animation forward when entering, reverse when leaving
+    }
+});
+
+/*gsap.to('.first', {
+    x: '100%', // Move the image 100% to the right
+    scrollTrigger: {
+        trigger: '.first',
+        duration:13,
+        start: 'top top', // Start the animation when the top of the image is at the top of the viewport
+        end: 'bottom bottom', // End the animation when the bottom of the image is at the bottom of the viewport
+        scrub: 3, // Smooth scrolling effect
+        markers: true // Display markers for debugging (you can remove this in production)
+    }
+});*/
+
+/*gsap.utils.toArray('.slide').forEach((slide, index) => {
+    gsap.set(slide, { opacity: 0, y: 50 }); // Initial opacity and position
+    ScrollTrigger.create({
+        trigger: slide,
+        start: "top center",
+        onEnter: () => gsap.to(slide, { opacity: 1, y: 0, duration: 0.5 }),
+    });
+});*/
+    // GSAP.fromTo animation
+    window.onload = function () {
+        // GSAP.fromTo animation
+        gsap.fromTo(
+            ".mobilePhoto",
+            { x: -100, opacity: 0 },
+            { x: 0, opacity: 1, duration: 2, ease: "power0.easeInOut" }
+        );
+
+        // Add ScrollTrigger for each mobilePhoto element
+        gsap.utils.toArray('.mobilePhoto').forEach((photo, index) => {
+            gsap.to(photo, {
+                opacity: 1,
+                x: 0,
+                duration: 2,
+                ease: "power0.easeInOut",
+                scrollTrigger: {
+                    trigger: photo,
+                    start: 'top 80%', // Adjust the start value based on when you want the animation to occur
+                    scrub: 1, // Set scrub to 1 for continuous animation while scrolling
+                },
+            });
+        });
+    };
+
+
+    // Scroll-triggered animation
+    gsap.from('.i1', {
+        x: '-100%', // move image 100% to the left
+        scale: 1.5,
+        opacity: 1,
+        duration: 2,
+        ease: 'power2.inOut',
+        yoyo: true,
+        scrollTrigger: {
+            trigger: '.image-container',
+            start: 'top 100%',
+            end: 'bottom 20%',
+            scrub: 1,
+            markers: false,
+            toggleActions: 'play reverse play reverse'
+        }
+    });
diff --git a/script1.js b/script1.js
@@ -0,0 +1,125 @@
+const container = document.querySelector(".container");
+const sections = gsap.utils.toArray(".container section");
+const texts = gsap.utils.toArray(".anim");
+const mask = document.querySelector(".mask");
+
+let scrollTween = gsap.to(sections, {
+  xPercent: -100 * (sections.length - 1),
+  ease: "none",
+  scrollTrigger: {
+    trigger: ".container",
+    pin: true,
+    scrub: 2,
+    end: "+=3000",
+    //snap: 1 / (sections.length - 1),
+    toggleActions: 'play reverse play reverse',
+    markers: false,
+  }
+});
+
+console.log(1 / (sections.length - 1))
+
+//Progress bar animation
+
+gsap.to(mask, {
+  width: "100%",
+  scrollTrigger: {
+    trigger: ".wrapper",
+    start: "top left",
+    scrub: 1
+  }
+});
+
+// whizz around the sections
+sections.forEach((section) => {
+  // grab the scoped text
+  let text = section.querySelectorAll(".anim");
+
+  // bump out if there's no items to animate
+  if(text.length === 0)  return 
+
+  // do a little stagger
+  gsap.from(text, {
+    y: -130,
+    opacity: 0,
+    duration: 4,
+    ease: "circ.out",
+    stagger: 0.1,
+    scrollTrigger: {
+      trigger: section,
+      containerAnimation: scrollTween,
+      start: "left center",
+      toggleActions: 'play reverse play reverse',
+      markers: false
+    }
+  });
+});
+// learn what all this code means at
+// https://www.creativecodingclub.com/bundles/creative-coding-club
+// unlock over 250 GSAP lessons today
+
+
+const details = gsap.utils.toArray(".desktopContentSection:not(:first-child)")
+const photos = gsap.utils.toArray(".desktopPhoto:not(:first-child)")
+
+
+gsap.set(photos, {yPercent:101})
+
+const allPhotos = gsap.utils.toArray(".desktopPhoto")
+
+
+// create
+let mm = gsap.matchMedia();
+
+// add a media query. When it matches, the associated function will run
+mm.add("(min-width: 600px)", () => {
+
+  // this setup code only runs when viewport is at least 600px wide
+  console.log("desktop")
+
+  ScrollTrigger.create({
+	trigger:".gallery",
+	start:"top top",
+	end:"bottom bottom",
+  toggleActions: 'play reverse play reverse',
+	pin:".right"
+})
+
+//create scrolltrigger for each details section
+//trigger photo animation when headline of each details section 
+//reaches 80% of window height
+details.forEach((detail, index)=> {
+
+	let headline = detail.querySelector("h1")
+	let animation = gsap.timeline()
+	   .to(photos[index], {yPercent:0})
+	   .set(allPhotos[index], {autoAlpha:0})
+	ScrollTrigger.create({
+		trigger:headline,
+		start:"top 80%",
+		end:"top 50%",
+		animation:animation,
+    toggleActions: 'play reverse play reverse',
+		scrub:true,
+		markers:false
+	})
+})
+
+
+
+  return () => { // optional
+    // custom cleanup code here (runs when it STOPS matching)
+	  console.log("mobile")
+  };
+});
+
+
+
+
+
+
+
+
+
+
+