diff --git a/src/factory/index.jsx b/src/factory/index.jsx index 37b46b58..8acab641 100644 --- a/src/factory/index.jsx +++ b/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 (
- {/*
+ + +

{bannerInfo.title}

{bannerInfo.desc}

立即体验
-
*/} +
+
+ +
+ 下滑了解更多 +
+
{/*
{ bannerData.map(e => { diff --git a/src/factory/index.scss b/src/factory/index.scss index b4705d20..59e665a9 100644 --- a/src/factory/index.scss +++ b/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; + } } \ No newline at end of file diff --git a/src/images/factory/banner.png b/src/images/factory/banner.png deleted file mode 100644 index 03d787ac..00000000 Binary files a/src/images/factory/banner.png and /dev/null differ diff --git a/src/images/factory/banner1.png b/src/images/factory/banner1.png deleted file mode 100644 index 49ec629f..00000000 Binary files a/src/images/factory/banner1.png and /dev/null differ diff --git a/src/images/factory/bg-1.mov b/src/images/factory/bg-1.mov new file mode 100644 index 00000000..cf5abd8d Binary files /dev/null and b/src/images/factory/bg-1.mov differ diff --git a/src/images/factory/bg-2.mp4 b/src/images/factory/bg-2.mp4 new file mode 100644 index 00000000..3bd9ed7f Binary files /dev/null and b/src/images/factory/bg-2.mp4 differ diff --git a/src/images/factory/mouse.png b/src/images/factory/mouse.png new file mode 100644 index 00000000..483d0092 Binary files /dev/null and b/src/images/factory/mouse.png differ