diff --git a/globleEffect/index.css b/globleEffect/index.css index 8ecd7de..7547a9e 100644 --- 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 index 384ed42..51f8a41 100644 --- 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%",