update style for interactive-animation

Author: nguyentramy1

public/assets/background/kinhlup.png

@@ -1,4 +1,18 @@
 <div class="interactive-container">
+  <!-- Parallax layers -->
+  <div class="parallax parallax-bg"></div>
+  <div class="parallax parallax-earth"></div>
+  <div class="parallax parallax-rocket"></div>
+  <div class="parallax parallax-robot"></div>
+
+  <!-- New elements -->
+  <div class="parallax parallax-laptop"></div>
+  <div class="parallax parallax-kinhlup"></div>
+  <div class="parallax parallax-tham"></div>
+  <div class="parallax parallax-vo"></div>
+  <div class="parallax parallax-vi"></div>
+
+  <!-- Sticky content -->
   <div class="sticky-wrapper">
     <canvas #animationCanvas></canvas>
     <div class="overlay-text">

public/assets/background/laptop.png

@@ -1,8 +1,219 @@
 .interactive-container {
-  // Tạo không gian để cuộn, chiều cao gấp 3 lần màn hình
-  height: 200vh;
+  height: 150vh;
   position: relative;
-  background-color: #0a0a1a; // Nền tối để nổi bật animation
+  overflow: hidden;
+
+  background-image: 
+    /* lớp overlay đen fade trong suốt ở trên/dưới */ linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0.6) 20%,
+      rgba(0, 0, 0, 0.6) 80%,
+      rgba(0, 0, 0, 0) 100%
+    ),
+    /* lớp ảnh vũ trụ có gradient để mờ dần */
+      linear-gradient(
+        to bottom,
+        rgba(0, 0, 0, 0.6) 0%,
+        rgba(0, 0, 0, 0) 20%,
+        rgba(0, 0, 0, 0) 80%,
+        rgba(0, 0, 0, 0.6) 100%
+      ),
+    url("../../../../../../public/assets/background/vutru.svg");
+
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+
+  .parallax,
+  .sticky-wrapper {
+    position: relative;
+    z-index: 1;
+  }
+
+  .parallax {
+    position: absolute;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+    will-change: transform;
+  }
+
+  .parallax-earth {
+    top: 50%;
+    left: 50%;
+    width: 60vw;
+    height: 60vh;
+    transform: translate(-50%, -50%);
+    position: absolute;
+    z-index: 1;
+
+    background: url("../../../../../../public/assets/background/traidat.png")
+      center/contain no-repeat;
+
+    -webkit-mask-image: url("../../../../../../public/assets/background/traidat.png");
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    -webkit-mask-size: contain;
+    mask-image: url("../../../../../../public/assets/background/traidat.png");
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: contain;
+
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(
+        135deg,
+        rgba(255, 255, 249, 0.6),
+        rgba(3, 18, 181, 0.6)
+      );
+      opacity: 0.6;
+      pointer-events: none;
+
+      -webkit-mask-image: url("../../../../../../public/assets/background/traidat.png");
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-position: center;
+      -webkit-mask-size: contain;
+      mask-image: url("../../../../../../public/assets/background/traidat.png");
+      mask-repeat: no-repeat;
+      mask-position: center;
+      mask-size: contain;
+    }
+  }
+
+  /* Gom cụm về góc dưới bên phải */
+  .parallax-laptop,
+  .parallax-kinhlup,
+  .parallax-tham,
+  .parallax-vo,
+  .parallax-vi {
+    position: absolute;
+    top: auto;
+    left: auto;
+    bottom: 0;
+    right: -20%;
+    transform: translate(-50%, -50%);
+    background-repeat: no-repeat;
+    background-size: contain;
+    will-change: transform;
+
+    /* overlay sáng giống parallax-earth */
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(
+        135deg,
+        rgba(255, 241, 241, 0.4),
+        rgba(26, 5, 118, 0.5)
+      );
+      pointer-events: none;
+    }
+  }
+
+  /* Laptop chính, to và nghiêng nhẹ */
+  .parallax-laptop {
+    width: 65vw;
+    height: 65vh;
+    background-image: url("../../../../../../public/assets/background/laptop.png");
+    transform: translate(-50%, -50%) rotate(-20deg);
+    top: 70%;
+    bottom: 10%;
+    z-index: 5;
+
+    &::before {
+      -webkit-mask-image: url("../../../../../../public/assets/background/laptop.png");
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-position: center;
+      -webkit-mask-size: contain;
+      mask-image: url("../../../../../../public/assets/background/laptop.png");
+      mask-repeat: no-repeat;
+      mask-position: center;
+      mask-size: contain;
+    }
+  }
+
+  .parallax-vo {
+    width: 55vw;
+    height: 50vh;
+    background-image: url("../../../../../../public/assets/background/vo.png");
+    bottom: 55%;
+    right: 50%;
+    z-index: 4;
+
+    &::before {
+      -webkit-mask-image: url("../../../../../../public/assets/background/vo.png");
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-position: center;
+      -webkit-mask-size: contain;
+      mask-image: url("../../../../../../public/assets/background/vo.png");
+      mask-repeat: no-repeat;
+      mask-position: center;
+      mask-size: contain;
+    }
+  }
+
+  .parallax-tham {
+    width: 55vw;
+    height: 40vh;
+    background-image: url("../../../../../../public/assets/background/tham.png");
+    bottom: 10%;
+    right: 40%;
+    z-index: 3;
+
+    &::before {
+      -webkit-mask-image: url("../../../../../../public/assets/background/tham.png");
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-position: center;
+      -webkit-mask-size: contain;
+      mask-image: url("../../../../../../public/assets/background/tham.png");
+      mask-repeat: no-repeat;
+      mask-position: center;
+      mask-size: contain;
+    }
+  }
+
+  .parallax-kinhlup {
+    width: 28vw;
+    height: 28vh;
+    background-image: url("../../../../../../public/assets/background/kinhlup.png");
+    bottom: 80%;
+    right: 0;
+    z-index: 6;
+
+    &::before {
+      -webkit-mask-image: url("../../../../../../public/assets/background/kinhlup.png");
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-position: center;
+      -webkit-mask-size: contain;
+      mask-image: url("../../../../../../public/assets/background/kinhlup.png");
+      mask-repeat: no-repeat;
+      mask-position: center;
+      mask-size: contain;
+    }
+  }
+
+  .parallax-vi {
+    width: 38vw;
+    height: 32vh;
+    background-image: url("../../../../../../public/assets/background/vi.png");
+    bottom: 40%;
+    right: -10%;
+    z-index: 4;
+
+    &::before {
+      -webkit-mask-image: url("../../../../../../public/assets/background/vi.png");
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-position: center;
+      -webkit-mask-size: contain;
+      mask-image: url("../../../../../../public/assets/background/vi.png");
+      mask-repeat: no-repeat;
+      mask-position: center;
+      mask-size: contain;
+    }
+  }
 
   .sticky-wrapper {
     position: sticky;
@@ -11,24 +222,15 @@
     width: 100%;
     display: flex;
     justify-content: center;
-    align-items: center;
-    overflow: hidden;
-    z-index: 1;
-
-    canvas {
-      width: 80%;
-      height: 80%;
-      object-fit: contain;
-    }
+    align-items: flex-start;
+    z-index: 3;
 
     .overlay-text {
       position: absolute;
       color: white;
       text-align: center;
       max-width: 600px;
-      // Hiệu ứng chữ mờ dần khi cuộn
-      opacity: 1;
-      transition: opacity 0.5s ease;
+      transition: opacity 0.5s ease, transform 0.5s ease;
     }
   }
 }