update of the images

abhishektyagi2912 · Jan 4, 2024 · e14eb09 · e14eb09
1 parent 458f916
commit e14eb09
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 36 deletions.
diff --git a/globleEffect/index.css b/globleEffect/index.css
@@ -152,36 +152,90 @@ canvas {
 
 
 #page3 {
+    display: flex;
+    height: 100vh;
+    position: relative;
     width: 100%;
     border-top: 1px solid transparent;
     z-index: 1;
 }
 
 #page3 video {
+    /* display: flex; */
     width: 100%;
     -o-object-fit: cover;
     object-fit: cover;
 }
 
 
 #video video {
+    position: absolute;
     width: 100%;
+    z-index: 1;
     height: auto;
     object-fit: cover;
     object-position: center top;
     background: transparent;
 }
 
-.collage-image {
+#page-left {
+    position: absolute;
     display: flex;
-    flex-wrap: wrap;
+    flex-direction: column;
+    margin-top: 20vh;
+    margin-left: 8vw;
+    color: #F4F4F4;
+}
+
+#page-left #image1 img{
+    position: absolute;
+    width: 20vw;
+    height: 25vh;
+    margin-top: -20vh;
+    object-fit: cover;
+    border-radius: 2vw;
+    object-position: center top;
+    background: transparent;
+}
+
+#page-left #image2 img{
+    position: absolute;
+    width: 20vw;
+    height: 25vh;
     margin-top: 10vh;
+    object-fit: cover;
+    border-radius: 2vw;
+    object-position: center top;
+    background: transparent;
+}
+
+#page-right {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    margin-top: 20vh;
+    margin-left: 70vw;
+    color: #F4F4F4;
 }
 
-.collage-image img{
-    width:20vw;
-    height: 30vh;
+#page-right #image3 img{
+    position: absolute;
+    width: 20vw;
+    height: 25vh;
+    margin-top: -20vh;
+    border-radius: 2vw;
+    object-fit: cover;
+    object-position: center top;
+    background: transparent;
+}
+
+#page-right #image4 img{
+    position: absolute;
+    width: 20vw;
+    height: 25vh;
+    margin-top: 10vh;
     object-fit: cover;
+    border-radius: 2vw;
     object-position: center top;
     background: transparent;
 }

diff --git a/globleEffect/index.js b/globleEffect/index.js
@@ -318,7 +318,7 @@ https://arvr.google.com/static/images/frames/hero/small/00466.png
         scrollTrigger: {
             scrub: 0.4,
             trigger: "#home2",
-            start: "bottom 2%",
+            start: "bottom 10%",
             end: "bottom 120%",
             ease: "none"
         },
@@ -330,7 +330,7 @@ https://arvr.google.com/static/images/frames/hero/small/00466.png
         scrollTrigger: {
             scrub: 0.4,
             trigger: "#home2",
-            start: "bottom 2%",
+            start: "bottom 10%",
             end: "bottom 120%",
             ease: "none"
         },
@@ -369,8 +369,8 @@ function shrinkVideoOnScroll() {
             scrub: 0.4,
             // markers: true,
             trigger: "#page3",
-            start: "top 10%", 
-            end: "bottom 20%", 
+            start: "top 10%",
+            end: "bottom 20%",
             ease: "none",
             pin: true,
         },
@@ -382,45 +382,53 @@ function shrinkVideoOnScroll() {
         scrollTrigger: {
             scrub: 0.4,
             trigger: "#page3",
-            start: "bottom 20%", 
-            end: "bottom 120%", 
+            start: "bottom 20%",
+            end: "bottom 120%",
             ease: "none",
         },
     });
 }
 shrinkVideoOnScroll();
 
-function zoomImagesOnScroll() {
-    // Set initial scale for images
-    gsap.set(["#image1", "#image2", "#image3", "#image4"], { scale: 0.2, transformOrigin: "center center" });
+function setupPage3Animations() {
+    const leftImages = ["#image1", "#image2"];
+    const rightImages = ["#image3", "#image4"];
+
+    gsap.set([leftImages, rightImages], { scale: 0.2, transformOrigin: "center center" });
 
-    // Scroll-triggered animation for zooming images
-    gsap.to(["#image1", "#image2"], {
+
+    // Scroll-triggered animation for zooming and rotating left images
+    gsap.to(leftImages, {
         scale: 1,
+        rotation: 360,
+        x: "-50%", // Left images
+        y: "-50%",
         scrollTrigger: {
             scrub: 0.4,
-            // markers: true,
             trigger: "#page3",
-            start: "top 0%",
-            end: "bottom 20%", 
+            start: "top 40%",
+            end: "bottom 20%",
             ease: "none",
         },
     });
 
-    gsap.to(["#image3", "#image4"], {
+    // Scroll-triggered animation for zooming and rotating right images
+    gsap.to(rightImages, {
         scale: 1,
+        rotation: -360,
+        x: "50%", // Right images
+        y: "-50%",
         scrollTrigger: {
             scrub: 0.4,
-            // markers: true,
             trigger: "#page3",
-            start: "top 0%",   
-            end: "bottom 20%", 
+            start: "top 40%",
+            end: "bottom 20%",
             ease: "none",
         },
     });
 }
 
-zoomImagesOnScroll();
+setupPage3Animations();
 
 
 

diff --git a/index.html b/index.html
@@ -47,23 +47,28 @@ <h1>Another section's text goes here</h1>
         </div>
     </div>
     <div id="page3">
+        <div id="page-left">
+            <div class="collage-image" id="image1">
+                <img src="./assets/01_Search.png" alt="error">
+            </div>
+            <div class="collage-image" id="image2">
+                <img src="./assets/02_Maps.png" alt="error">
+            </div>
+        </div>
+
         <div id="video">
             <video src="./assets/carousel_1.mp4" autoplay muted loop></video>
         </div>
-        <div class="collage-image" id="image1">
-            <img src="./assets/01_Search.png" alt="error">
-        </div>
-        <div class="collage-image" id="image2">
-            <img src="./assets/02_Maps.png" alt="error">
-        </div>
-        <div class="collage-image" id="image3">
-            <img src="./assets/03_ARCore.png" alt="error">
-        </div>
-        <div class="collage-image" id="image4">
-            <img src="./assets/04_ARGlass.png" alt="error">
+        <div id="page-right">
+            <div class="collage-image2" id="image3">
+                <img src="./assets/03_ARCore.png" alt="error">
+            </div>
+            <div class="collage-image2" id="image4">
+                <img src="./assets/04_ARGlass.png" alt="error">
+            </div>
         </div>
     </div>
-    
+
     <div id="main2">
         <div id="page2Heading">
             <p>Hey this is my website </p>