video size incerases

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

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/globleEffect/index.css b/globleEffect/index.css
@@ -170,9 +170,9 @@ canvas {
 
 #video video {
     position: absolute;
-    width: 100%;
     z-index: 1;
     height: auto;
+    border-radius: 2vw;
     object-fit: cover;
     object-position: center top;
     background: transparent;
@@ -189,7 +189,7 @@ canvas {
 
 #page-left #image1 img{
     position: absolute;
-    width: 20vw;
+    width: 25vw;
     height: 25vh;
     margin-top: -20vh;
     object-fit: cover;
@@ -200,9 +200,10 @@ canvas {
 
 #page-left #image2 img{
     position: absolute;
-    width: 20vw;
+    width: 15vw;
     height: 25vh;
     margin-top: 10vh;
+    margin-left: 10vw;
     object-fit: cover;
     border-radius: 2vw;
     object-position: center top;
@@ -220,7 +221,7 @@ canvas {
 
 #page-right #image3 img{
     position: absolute;
-    width: 20vw;
+    width: 15vw;
     height: 25vh;
     margin-top: -20vh;
     border-radius: 2vw;
@@ -231,7 +232,7 @@ canvas {
 
 #page-right #image4 img{
     position: absolute;
-    width: 20vw;
+    width: 25vw;
     height: 25vh;
     margin-top: 10vh;
     object-fit: cover;

diff --git a/globleEffect/index.js b/globleEffect/index.js
@@ -364,10 +364,10 @@ function shrinkVideoOnScroll() {
 
     // Scroll-triggered animation for video scaling
     gsap.to(video, {
-        scale: 0.2,
+        scale: 0.3,
         scrollTrigger: {
             scrub: 0.4,
-            // markers: true,
+            markers: true,
             trigger: "#page3",
             start: "top 10%",
             end: "bottom 20%",