首页优化

src/factory/index.jsx

@@ -10,6 +10,9 @@ import gsap from 'gsap';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
 import Scene from './components/Scene';
 import { factoryZoneId } from '../constants/factory';
+import bg1 from '../images/factory/bg-1.mov'
+import bg2 from '../images/factory/bg-2.mp4'
+import mouse from '../images/factory/mouse.png'
 
 gsap.registerPlugin(ScrollTrigger);
 
@@ -24,6 +27,7 @@ function Index(props) {
   const resourceRef = useRef(null);
   const resource2Ref = useRef(null);
   const [isVisible, setIsVisible] = useState(false);
+  const [firstV, setFirstV] = useState(true)
 
   useEffect(() => {
     const observer = new IntersectionObserver((entries) => {
@@ -57,15 +61,15 @@ function Index(props) {
     if (!resource || !resource2) return;
     const cleanup = [];
 
-  const pinContainer = ScrollTrigger.create({
-    trigger: resource,
-    start: "top top",
-    endTrigger: ".factory-resource .panels-stack", // 使用Resource内部的堆叠区域
-    end: "bottom top", // 当堆叠区域滚动到顶部时结束固定
-    pin: resource,
-    pinSpacing: false,
-    scrub: true
-  });
+    const pinContainer = ScrollTrigger.create({
+      trigger: resource,
+      start: "top top",
+      endTrigger: ".factory-resource .panels-stack", // 使用Resource内部的堆叠区域
+      end: "bottom top", // 当堆叠区域滚动到顶部时结束固定
+      pin: resource,
+      pinSpacing: false,
+      scrub: true
+    });
     cleanup.push(() => pinContainer.kill());
 
     return () => {
@@ -76,13 +80,21 @@ function Index(props) {
   return (
     <div className="factory">
       <div className="factory-banner">
-        {/* <div className="banner-content">
+        <video className={ `factory-banner-video ${ firstV ? 'video-show' : '' }` } src={bg1} autoPlay muted onEnded={() => { setFirstV(false) }}></video>
+        <video className={ `factory-banner-video ${ !firstV ? 'video-show' : '' }` } src={bg2} autoPlay muted loop></video>
+        <div className="banner-content">
           <h1>{bannerInfo.title}</h1>
           <p>{bannerInfo.desc}</p>
           <Link to={`${bannerInfo.link}`}>
             <div className="banner-content-button">立即体验</div>
           </Link>
-        </div> */}
+          <div className="banner-content-more">
+            <div>
+              <img src={ mouse } alt="" ></img>
+            </div>
+            <span>下滑了解更多</span>
+          </div>
+        </div>
         {/* <div className="banner-data">
           {
             bannerData.map(e => {

src/factory/index.scss

@@ -9,51 +9,75 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    height: 52vw;
-    background-image: url("../images/factory/banner1.png");
-    background-size: cover;
-    /* 确保图片完整显示不被拉伸 */
-    background-repeat: no-repeat;
-    background-position: top center;
-    /* 可选：将图片居中显示 */
+    height: 100vh;
+    overflow: hidden;
+
+    // background-image: url("../images/factory/banner1.png");
+    // background-size: cover;
+    // /* 确保图片完整显示不被拉伸 */
+    // background-repeat: no-repeat;
+    // background-position: top center;
+    // /* 可选：将图片居中显示 */
+    &-video {
+      width: 100%;
+      display: none;
+    }
+
+    .video-show {
+      display: block;
+    }
 
     .banner-content {
-      margin-top: 130px;
+      position: absolute;
+      top: 60vh;
       display: flex;
       flex-direction: column;
       align-items: center;
+      height: 40vh;
 
       h1 {
         line-height: normal;
-        font-family: shuheiTi;
+        font-family: "DouyinSansBold";
         font-weight: 700;
-        font-size: 54px;
+        font-size: 76px;
         color: #ffffff;
+        opacity: 0;
+        transform: scaleX(2) scaley(1.5);
+        animation: headerShow 2s ease-in-out forwards;
+        animation-delay: 2s;
+        margin-bottom: 10px;
+        letter-spacing: 10px;
       }
 
       p {
-        color: #ffffff;
-        opacity: 90%;
+        opacity: 0;
+        color: #ffffffd3;
         line-height: 36px;
         font-family: alibabareg;
-        font-size: 16px;
+        font-size: 20px;
         width: 635px;
+        text-align: center;
+        animation: fadeInUp 2s ease-in-out forwards;
+        animation-delay: 2s;
       }
 
       &-button {
-        width: 200px;
-        height: 58px;
-        background: linear-gradient(94.15deg, #60e37b 2.88%, #40a3a9 28.11%, #1b58df 58.03%);
+        opacity: 0;
+        width: 230px;
+        height: 64px;
+        background: linear-gradient(90deg, #5b47f2 1.89%, #164ce4 97.65%);
         border-radius: 29px;
+        box-shadow: 0px -3px 12px rgba(255, 255, 255, 0.45) inset;
         position: relative;
         font-family: alibaba;
-        font-weight: 500;
         color: #ffffff;
-        font-size: 20px;
+        font-size: 19px;
         text-align: center;
         overflow: hidden;
         line-height: 58px;
-        margin-top: 55px;
+        margin-top: 50px;
+        animation: fadeInUp 2s ease-in-out forwards;
+        animation-delay: 2s;
 
         &::before {
           content: '';
@@ -81,6 +105,46 @@
           background: linear-gradient(90.02deg, rgba(255, 255, 255, 0) 0%, #ffffff 46.97%, rgba(255, 255, 255, 0) 99.63%);
         }
       }
+
+      &-more {
+        opacity: 0;
+        margin-top: auto;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding-bottom: 20px;
+        animation: mouseShow 1s  forwards;
+        animation-delay: 4s;
+
+        div {
+          position: relative;
+          &::after {     
+            content: "";
+            width: 3px;
+            height: 8px;
+            background: #ffffff;
+            position: absolute;
+            top: 8px;
+            left: 50%;
+            transform: translate(-50%,0);
+            animation: mouse 1.5s ease-out infinite;
+          }
+        }
+
+        img {
+          width: 27px;
+        }
+
+        span {
+          opacity: 85%;
+          line-height: 20px;
+          font-family: alibabareg;
+          color: #ffffff;
+          font-size: 14px;
+          text-align: center;
+          margin-top: 10px;
+        }
+      }
     }
 
     .banner-data {
@@ -165,7 +229,8 @@
       animation: fadeInUp 0.8s ease-out forwards;
     }
 
-    .resource-container, .feature-container {
+    .resource-container,
+    .feature-container {
       animation: resourceShow 0.8s ease-in-out forwards;
     }
 
@@ -219,4 +284,26 @@
     opacity: 1;
     transform: scale(1);
   }
+}
+
+@keyframes headerShow {
+  to {
+    opacity: 1;
+    transform: scalex(1) scaleY(1);
+  }
+}
+
+@keyframes mouse {
+  50% {
+    top: 8px
+  }
+  to {
+    top: 16px;
+  }
+}
+
+@keyframes mouseShow {
+  to {
+    opacity: 1;
+  }
 }