|
|
|
|
@ -8,30 +8,27 @@ function MainPage() {
|
|
|
|
|
const sectionRef = useRef(null); |
|
|
|
|
const bgRef = useRef(null); |
|
|
|
|
const hero2Ref = useRef(null); |
|
|
|
|
const hero3Ref = useRef(null); |
|
|
|
|
const videoRef = useRef(null); |
|
|
|
|
const text1Ref = useRef(null); |
|
|
|
|
const text2Ref = useRef(null); |
|
|
|
|
const text3Ref = useRef(null); |
|
|
|
|
const progressBarRef = useRef(null); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
const ctx = gsap.context(() => { |
|
|
|
|
gsap.set(hero2Ref.current, { opacity: 0, scale: 1.14, filter: "blur(10px)" }); |
|
|
|
|
gsap.set(hero3Ref.current, { opacity: 0, scale: 1.14, filter: "blur(10px)" }); |
|
|
|
|
const videoEl = videoRef.current; |
|
|
|
|
|
|
|
|
|
gsap.set(text2Ref.current, { |
|
|
|
|
opacity: 0, |
|
|
|
|
y: 48, |
|
|
|
|
x: 0, |
|
|
|
|
scale: 0.96, |
|
|
|
|
filter: "blur(10px)", |
|
|
|
|
}); |
|
|
|
|
if (videoEl) { |
|
|
|
|
videoEl.pause(); |
|
|
|
|
videoEl.currentTime = 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
gsap.set(hero2Ref.current, { opacity: 0, scale: 1.12, filter: "blur(12px)" }); |
|
|
|
|
|
|
|
|
|
gsap.set(text3Ref.current, { |
|
|
|
|
gsap.set(text2Ref.current, { |
|
|
|
|
opacity: 0, |
|
|
|
|
y: 48, |
|
|
|
|
y: 54, |
|
|
|
|
x: 0, |
|
|
|
|
scale: 0.96, |
|
|
|
|
scale: 0.965, |
|
|
|
|
filter: "blur(10px)", |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
@ -41,42 +38,56 @@ function MainPage() {
|
|
|
|
|
const darkHeroTrigger = ScrollTrigger.create({ |
|
|
|
|
trigger: sectionRef.current, |
|
|
|
|
start: "top top", |
|
|
|
|
end: "+=2600", |
|
|
|
|
end: "+=3000", |
|
|
|
|
onEnter: () => document.body.classList.add("is-dark-hero"), |
|
|
|
|
onEnterBack: () => document.body.classList.add("is-dark-hero"), |
|
|
|
|
onLeave: () => document.body.classList.remove("is-dark-hero"), |
|
|
|
|
onLeaveBack: () => document.body.classList.remove("is-dark-hero"), |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
let hero2Started = false; |
|
|
|
|
|
|
|
|
|
const tl = gsap.timeline({ |
|
|
|
|
scrollTrigger: { |
|
|
|
|
trigger: sectionRef.current, |
|
|
|
|
start: "top top", |
|
|
|
|
end: "+=2600", |
|
|
|
|
scrub: 1.2, |
|
|
|
|
end: "+=3000", |
|
|
|
|
scrub: 1.15, |
|
|
|
|
pin: true, |
|
|
|
|
anticipatePin: 1, |
|
|
|
|
onUpdate: (self) => { |
|
|
|
|
if (!videoEl) return; |
|
|
|
|
|
|
|
|
|
if (self.progress >= 0.42 && !hero2Started) { |
|
|
|
|
hero2Started = true; |
|
|
|
|
videoEl.currentTime = 0; |
|
|
|
|
videoEl.play().catch(() => {}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (self.progress < 0.42 && hero2Started) { |
|
|
|
|
hero2Started = false; |
|
|
|
|
videoEl.pause(); |
|
|
|
|
videoEl.currentTime = 0; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
tl.to(bgRef.current, { width: "100vw", height: "100vh", borderRadius: 0, ease: "none" }, 0) |
|
|
|
|
.to(bgRef.current, { scale: 1.08, ease: "none" }, 0) |
|
|
|
|
.to(progressBarRef.current, { width: "100%", ease: "none" }, 0) |
|
|
|
|
.to(".fill-line", { backgroundPosition: "0% 0%", ease: "none", stagger: 0.12, duration: 1.2 }, 0.08) |
|
|
|
|
|
|
|
|
|
.to(text1Ref.current, { opacity: 0, y: -40, filter: "blur(8px)", ease: "none" }, 1.35) |
|
|
|
|
|
|
|
|
|
.to(hero2Ref.current, { opacity: 1, scale: 1.03, filter: "blur(0px)", ease: "none" }, 1.15) |
|
|
|
|
.to(text2Ref.current, { opacity: 1, y: 0, scale: 1, filter: "blur(0px)", ease: "none" }, 1.24) |
|
|
|
|
|
|
|
|
|
.to(hero2Ref.current, { scale: 1.1, ease: "none" }, 1.72) |
|
|
|
|
.to(text2Ref.current, { opacity: 0, y: -28, scale: 0.98, filter: "blur(8px)", ease: "none" }, 2.02); |
|
|
|
|
.to(".fill-line", { backgroundPosition: "0% 0%", ease: "none", stagger: 0.14, duration: 1.35 }, 0.1) |
|
|
|
|
|
|
|
|
|
// .to(hero3Ref.current, { opacity: 1, scale: 1.03, filter: "blur(0px)", ease: "none" }, 2.14) |
|
|
|
|
// .to(text3Ref.current, { opacity: 1, y: 0, scale: 1, filter: "blur(0px)", ease: "none" }, 2.28) |
|
|
|
|
// .to(hero3Ref.current, { scale: 1.08, ease: "none" }, 2.82); |
|
|
|
|
.to(hero2Ref.current, { opacity: 1, scale: 1.035, filter: "blur(0px)", ease: "none" }, 1.55) |
|
|
|
|
.to(text1Ref.current, { opacity: 0, y: -34, scale: 0.985, filter: "blur(8px)", ease: "none" }, 1.78) |
|
|
|
|
.to(text2Ref.current, { opacity: 1, y: 0, scale: 1, filter: "blur(0px)", ease: "none" }, 1.95) |
|
|
|
|
.to(hero2Ref.current, { scale: 1.095, ease: "none" }, 2.5); |
|
|
|
|
|
|
|
|
|
return () => { |
|
|
|
|
if (videoEl) { |
|
|
|
|
videoEl.pause(); |
|
|
|
|
videoEl.currentTime = 0; |
|
|
|
|
} |
|
|
|
|
darkHeroTrigger.kill(); |
|
|
|
|
document.body.classList.remove("is-dark-hero"); |
|
|
|
|
}; |
|
|
|
|
@ -91,10 +102,10 @@ function MainPage() {
|
|
|
|
|
<div className="main-bg-wrap"> |
|
|
|
|
<div className="main-bg" ref={bgRef}> |
|
|
|
|
<div className="main-bg-hero1"></div> |
|
|
|
|
|
|
|
|
|
<div className="main-bg-hero2" ref={hero2Ref}> |
|
|
|
|
<video className="hero-video" src="./images/test.mp4" autoPlay muted loop playsInline /> |
|
|
|
|
<video ref={videoRef} className="hero-video" src="./images/test.mp4" muted loop playsInline preload="auto" /> |
|
|
|
|
</div> |
|
|
|
|
{/* <div className="main-bg-hero3" ref={hero3Ref}></div> */} |
|
|
|
|
|
|
|
|
|
<div className="main-visible-atmo main-visible-atmo1"></div> |
|
|
|
|
<div className="main-visible-atmo main-visible-atmo2"></div> |
|
|
|
|
@ -116,12 +127,6 @@ function MainPage() {
|
|
|
|
|
<br /> |
|
|
|
|
안전한 하늘길을 설계합니다 |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
{/* <div className="text text-change text-center-hero" ref={text3Ref}> |
|
|
|
|
공역관리와 드론 교통관리(UTM)를 기반으로 |
|
|
|
|
<br /> |
|
|
|
|
실제 운영 가능한 항공 시스템을 구축합니다 |
|
|
|
|
</div> */} |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div className="main-progress"> |
|
|
|
|
|
