palnetworks
/
pal-hom-2026
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

메인 타이밍

remotes/origin/main
김지은 2 months ago
parent
3720d578dc
commit
2cadd4272e
2 changed files with 45 additions and 44 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      src/css/common.css
  2. 79
      src/pages/MainPage.jsx

10
src/css/common.css
Unescape View File

@ -23,10 +23,9 @@ body{overflow-x:hidden;}
.main-bg{position:relative;width:min(1440px,calc(100vw - 80px));height:600px;border-radius:24px;overflow:hidden;transform-origin:center center;will-change:transform,width,height,border-radius;background:#050b17;} .main-bg{position:relative;width:min(1440px,calc(100vw - 80px));height:600px;border-radius:24px;overflow:hidden;transform-origin:center center;will-change:transform,width,height,border-radius;background:#050b17;}
.main-bg-hero1{position:absolute;inset:0;background:url('/images/hero1.png') no-repeat 50% 50%/cover;transform:scale(1.04);} .main-bg-hero1{position:absolute;inset:0;background:url('/images/hero1.png') no-repeat 50% 50%/cover;transform:scale(1.04);}
/* .main-bg-hero2{position:absolute;inset:0;background:url('/images/hero2.png') no-repeat 50% 50%/cover;opacity:0;} */ .main-bg-hero2{position:absolute;inset:0;opacity:0;overflow:hidden;will-change:transform,opacity,filter;}
.main-bg-hero2{position:absolute;inset:0;opacity:0;overflow:hidden;} .main-bg-hero2::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,8,20,.18) 0%,rgba(3,8,20,.28) 35%,rgba(3,8,20,.42) 100%),rgba(0,0,0,.18);pointer-events:none;}
.hero-video{width:100%;height:100%;object-fit:cover;} .hero-video{width:100%;height:100%;object-fit:cover;filter:brightness(.82) contrast(1.06) saturate(.96);transform:scale(1.02);}
.main-bg-hero3{position:absolute;inset:0;background:url('/images/hero3.png') no-repeat 50% 50%/cover;opacity:0;}
.main-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,10,24,.12) 0%,rgba(4,10,24,.24) 38%,rgba(4,10,24,.56) 100%),linear-gradient(90deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,.05) 42%,rgba(0,0,0,.12) 100%);z-index:1;pointer-events:none;} .main-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,10,24,.12) 0%,rgba(4,10,24,.24) 38%,rgba(4,10,24,.56) 100%),linear-gradient(90deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,.05) 42%,rgba(0,0,0,.12) 100%);z-index:1;pointer-events:none;}
.main-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 58%,rgba(255,255,255,.06) 0%,rgba(255,255,255,.024) 18%,rgba(255,255,255,0) 44%),radial-gradient(circle at 50% 78%,rgba(58,64,129,.16) 0%,rgba(58,64,129,.08) 20%,rgba(58,64,129,0) 44%);z-index:1;pointer-events:none;} .main-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 58%,rgba(255,255,255,.06) 0%,rgba(255,255,255,.024) 18%,rgba(255,255,255,0) 44%),radial-gradient(circle at 50% 78%,rgba(58,64,129,.16) 0%,rgba(58,64,129,.08) 20%,rgba(58,64,129,0) 44%);z-index:1;pointer-events:none;}
@ -44,17 +43,14 @@ body{overflow-x:hidden;}
.main-grid{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.18;background-image:linear-gradient(rgba(174,206,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(174,206,255,.08) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.22) 20%,rgba(0,0,0,.72) 52%,rgba(0,0,0,.18) 100%);animation:gridShift 10s linear infinite;} .main-grid{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.18;background-image:linear-gradient(rgba(174,206,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(174,206,255,.08) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.22) 20%,rgba(0,0,0,.72) 52%,rgba(0,0,0,.18) 100%);animation:gridShift 10s linear infinite;}
.main-text{position:absolute;inset:0;z-index:3;pointer-events:none;} .main-text{position:absolute;inset:0;z-index:3;pointer-events:none;}
.main-text .text{position:absolute;color:#fff;text-shadow:0 10px 30px rgba(0,0,0,.22);will-change:transform,opacity,filter;} .main-text .text{position:absolute;color:#fff;text-shadow:0 10px 30px rgba(0,0,0,.22);will-change:transform,opacity,filter;}
.text-left-bottom{left:92px;bottom:124px;width:100%;max-width:760px;text-align:left;font-size:64px;line-height:1.12;font-weight:700;letter-spacing:-.05em;} .text-left-bottom{left:92px;bottom:124px;width:100%;max-width:760px;text-align:left;font-size:64px;line-height:1.12;font-weight:700;letter-spacing:-.05em;}
.text-center-hero{left:50%;top:45%;transform:translate(-50%,-50%);width:min(1080px,calc(100% - 120px));text-align:center;font-size:56px;line-height:1.24;font-weight:700;letter-spacing:-.045em;} .text-center-hero{left:50%;top:45%;transform:translate(-50%,-50%);width:min(1080px,calc(100% - 120px));text-align:center;font-size:56px;line-height:1.24;font-weight:700;letter-spacing:-.045em;}
.main-text .text-change{opacity:0;} .main-text .text-change{opacity:0;}
.main-kicker{display:block;margin-bottom:18px;font-size:12px;letter-spacing:.22em;font-weight:600;color:rgba(255,255,255,.68);} .main-kicker{display:block;margin-bottom:18px;font-size:12px;letter-spacing:.22em;font-weight:600;color:rgba(255,255,255,.68);}
.main-text .text-fill .fill-line{display:inline-block;color:rgba(255,255,255,.28);background:linear-gradient(90deg,#fff 0%,#fff 50%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.28) 100%);background-size:220% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} .main-text .text-fill .fill-line{display:inline-block;color:rgba(255,255,255,.28);background:linear-gradient(90deg,#fff 0%,#fff 50%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.28) 100%);background-size:220% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.main-progress{position:absolute;left:50%;bottom:42px;transform:translateX(-50%);width:min(240px,calc(100% - 48px));height:2px;background:rgba(255,255,255,.22);z-index:3;overflow:hidden;border-radius:999px;} .main-progress{position:absolute;left:50%;bottom:42px;transform:translateX(-50%);width:min(240px,calc(100% - 48px));height:2px;background:rgba(255,255,255,.22);z-index:3;overflow:hidden;border-radius:999px;}

79
src/pages/MainPage.jsx
Unescape View File

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

Write Preview
Loading…
Cancel
Save