์ํฐํ๋ผ์ด์ฆ๋ธ๋ก์ฒด์ธ
- -
๐ ์ํฐํ๋ผ์ด์ฆ ๋ธ๋ก์ฒด์ธ
๐ ์ฌ์ดํธ๋ช
: ์ํฐํ๋ผ์ด์ฆ ๋ธ๋ก์ฒด์ธ
๐ ์์
๊ธฐ๊ฐ : 6์ผ
๐ ์ฌ์ฉ์ธ์ด : HTML5, CSS3, JQuery
๐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ : GSAP, Swiper
๐ ๋ถ๋ฅ : PC ์ธ๋ฏธ ๋ฐ์ํ ์น์ฌ์ดํธ
๐ URL : https://codenablog.github.io/Enterprise-Blockchain/
โจPOINT
โ๏ธ ๋ชจ์
์ ๋ถ์๊ณผ ์ดํด
โ๏ธ GSAP + ScrollTriger๋ฅผ ํ์ฉํ ์ ๋๋ฉ๋ฆฌ์
๊ตฌํ
โ๏ธ Video Background๋ก ์ฌ์ฉ
โ๏ธ Top ๋ฒํผ ์์น ๋ณํ
โ๏ธ ํ ๋ฐฉํฅ์ผ๋ก ๊ณ์ ํ๋ฌ๊ฐ๋ ํ
์คํธ ๋ฒ ๋
๐ก ๊ตฌ์กฐ ์ดํด๋ณด๊ธฐ
1. ์ ์ฒด ํ๊ทธ๋ฅผ wrapper๋ก ๊ฐ์ธ์ฃผ๊ธฐ
์ธ๋ฏธ ๋ฐ์ํ์ด์ง๋ง PC๋ง ์ง์ํ๋๋ก ๋ง๋ค์๊ธฐ ๋๋ฌธ์, ์ต์๋๋น๋ฅผ 1300ํฝ์
๋ก ์ก์์ฃผ์๋ค.
์ด๋, ์ปจํ
์ธ ์ ์ํ ์คํฌ๋กค์์ญ ๋๋ฌธ์ ๊ฐ๋ก์คํฌ๋กค์ด ์๊ธธ ์ํ์ ๋ฎ์ถ๊ธฐ ์ํด overflow-x:hidden ์ ์ฌ์ฉํ๋๋ฐ, body์ wrapper์ ๋๋ค ๊ฐ๊ฐ 1300px์ min-width๋ฅผ ์ฃผ๊ณ , wrapper์ overflow-x:hidden์ ์ฌ์ฉํด์ ํ๋ฉด์ด 1300px๋ณด๋ค ์์์ ๋์น๋ ์์ญ์๋ง ์คํฌ๋กค์ด ์๊ธธ ์ ์๋๋ก ์ฝ๋ฉํ๋ค.
.wrapper{
min-width:1300px;
overflow-x: hidden;
}
body{
min-width:1300px;
}
2. ์๋ฉํฑ ํ๊ทธ๋ฅผ ํ์ฉํด ์์ญ ๊ตฌ์ฑ
3. ๊ฐ๊ฐ์ section์๋ h2ํ๊ทธ๋ก ์ ๋ชฉ ๊ตฌ์ฑ
4. ํด๋์ค๋ช ์ ํต์ผ์ฑ์ ์ฃผ์ด ์ง๊ด์ ์ผ๋ก ๊ตฌ์กฐ๋ฅผ ํ์ ํ ์์๋๋ก ๊ตฌ์ฑ
๊ฐ ์น์ ๋ด๋ถ ์ํ์ผ๋ก ์คํฌ๋กค๋๋ ์์ญ์ 'group-hori', ์์ง์ผ๋ก ์คํฌ๋กค๋๋ ์์ญ์ 'group-scroll'๋ก ๊ตฌ์ฑํ์ฌ ์ปจํธ๋กคํด์ ๊ตฌ์กฐํ์ ํ๊ธฐ ์ฉ์ดํ๊ฒ ํ๋ค.
<section class="sc-data sc-card">
<div class="group-hori">
.
.
</div>
<div class="group-scroll">
.
.
</div>
</section>
5. article
section๋ค์ ๋ชจ์ ์์ญ์ ๋
๋ฆฝ์ ์ผ๋ก ์กด์ฌํ ์ ์๋ article ํ๊ทธ๋ก ๊ฐ์ ์ ์๋ค.
์ํฐํ๋ผ์ด์ฆ๋ธ๋ก์ฒด์ธ ์ฌ์ดํธ๋ฅผ ํด๋ก ์ฝ๋ฉํ๋ฉด์ DATA ID ๋ด์ฉ์ด ๋์ด๋๋ ์์ญ์ 'DATA ID'๋ผ๋ ๊ณตํต ๋ด์ฉ์ ๋ด์ ๋
๋ฆฝ์ ์ธ ์ปจํ
์ธ ๊ธฐ ๋๋ฌธ์ article๋ก ๊ตฌ์ฑํ๋ค.
๐ GSAP + ScrollTrigger
์ฌ์ดํธ์ ๋ชจ์
ํจ๊ณผ๋ฅผ ๋ง๋ค ์ํด Greensock์์ ๋ง๋ GSAP์ด๋ผ๋ JS ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ด์ฉํ๋ค. ๐
GSAP์ ํ๋ฌ๊ทธ์ธ์ธ ScrollTrigger๋ฅผ ํจ๊ป ์ฌ์ฉํ์ฌ ์คํฌ๋กค์ ์ด์ฉํด ์ ๋๋ฉ์ด์
์ด ์์ง์ด๊ณ ๋ฉ์ถ๋๋ก ๋ง๋ค์๋ค.
1. ScrollTrigger ์ฌ์ฉ๋ฒ
โ timeline ๋ฉ์๋๋ฅผ ์ด์ฉํด ์คํฌ๋กค์ ๋์ํ ์ ๋๋ฉ์ด์ ์ ๋ง๋ค์ด์ค๋ค.
๊ธฐ๋ณธ์ ์ผ๋ก ๋์ด๋ ์์์ ๋ฐ๋ผ ๋์ํ์ง๋ง, ๋์์ ๋์ํ๊ณ ์ถ์ ์ ๋๋ฉ์ด์
์ addLabel์ ์ด์ฉํด Label์ ์ ์ธํ๊ณ , ์ค๊ดํธ ๋ค์ ๋ถ์ฌ์ฃผ๋ฉด ๊ฐ์ Label์ด ๋ถ์ ์ ๋๋ฉ์ด์
์ ๋์์ ๋์ํ๊ฒ ๋๋ค.
๋ { ์ค๊ดํธ ์ } ์ duration, delay ์์ฑ์ ํ์ฉํ์ฌ ํ์ด๋ฐ์ ๋ ๋ํ
์ผํ๊ฒ ์ปจํธ๋กคํ ์ ์๋ค.
const intro = gsap.timeline();
intro
.addLabel('a')
.to(".sc-intro .text-bg", {backgroundColor:"rgba(0,0,0,0.6)", duration: 100},'a')
.from(".sc-intro .t01", {autoAlpha: 0, duration: 100},'a')
.to(".sc-intro .t01", {autoAlpha: 0, duration: 100},"+=1")
.from(".sc-intro .t02", {autoAlpha: 0, duration: 100}, "+=1")
.to(".sc-intro .t02", {autoAlpha: 0, duration: 100},"+=1")
.from(".sc-intro .t03", {autoAlpha: 0, duration: 100}, "+=1")
.to(".sc-intro .t03", {autoAlpha: 0, duration: 100},"+=1")
.from(".sc-intro .t04", {autoAlpha: 0, duration: 100}, "+=1")
โก ScrollTrigger๋ฅผ ๋ง๋ค์ด ์ ๋๋ฉ์ด์ ์ ์ ์ฉํ๋ค.
ScrollTrigger.create({
animation: intro,
trigger: ".sc-intro",
start: "top top",
end: "+=7000",
scrub: true,
pin: true,
})
animation: ์คํํ ์ ๋๋ฉ์ด์
์ ์ด๋ฆ
trigger: ์ด๋ค ์์๋ฅผ ๊ธฐ์ค์ผ๋ก ํ ์ง
start: ์์์ ๊ธฐ์ค. "์์ / ์ฐฝ"
end: ๋์ ๊ธฐ์ค. "์์ / ์ฐฝ" , "+=์ซ์" ("+=3000"์ด๋ฉด ์์์ ์์ 3000px์ด ์คํฌ๋กค ๋ ๋๊น์ง ๋์)
pin:true: ์ ๋๋ฉ์ด์
์ด ๋์ํ๋ ๋์์ ์์ญ์ด ํ๋ฉด์ ๊ณ ์
scrub:true: ์คํฌ๋กค์ด ์ค๋จ๋๊ฑฐ๋ ๋ค๋ก ๋์๊ฐ๋ ์ ๋๋ฉ์ด์
๋ ํจ๊ป ์ ์ง๋๊ฑฐ๋ ์ญ์ฌ์ํ๋ค.
2. ScrollTrigger์ ์ด์ฉํ Class ์ปจํธ๋กค
โ toggleClass ๋ฉ์๋๋ฅผ ์ด์ฉํด ๊ฐ๋จํ๊ฒ ํด๋์ค๋ฅผ on/offํ ์๋ ์๊ณ ,
โก 'onEnter','onLeave', 'onEnterBack','onLeaveBack' ๋ฉ์๋๋ฅผ ์ด์ฉํ๋ฉด ์ํ๋ ํ์ด๋ฐ์ ํด๋์ค๋ฅผ on/offํ ์๋ ์๋ค.
// 1
ScrollTrigger.create({
animation: intro,
trigger: ".sc-intro",
start: "top top",
end: "+=7000",
scrub: true,
pin: true,
markers: false,
toggleClass:{
targets:"#topBtn", className:"hide"
}
})
// 2
ScrollTrigger.create({
trigger:'body',
start:"1000px 0%",
end:"100% 100%",
onEnter:function(){
$('.header').addClass('fixed')
},
onLeaveBack:function(){
$('.header').removeClass('fixed')
}
})
๐ ๋์์์ Background๋ก ์ฌ์ฉํ ๋
position:absolute๋ก ์์น๋ฅผ ์์ญ์ ๊ณ ์ ์ํค๊ณ , z-index๋ฅผ ์ด์ฉํ์ฌ ๋ค๋ก ๋ณด๋๋ค.
๋น๋์ค์ autoplay, loop๋ ์คฌ๋๋ฐ ..! ์๋์ฌ์์ด ๋ ๋๊ฐ ์๊ณ ์๋ ๋๊ฐ ์์ ๐ง
์ ๊ทธ๋ฐ์ง ์ฐพ์๋ณด๋๊น ํฌ๋กฌ์์ ์๋ฆฌ๊ฐ ์๋ ๋์์์ ์๋์ฌ์์ด ์๋๋ค๊ณ , ์ด๋ด๋ muted๋ฅผ ์จ์ค์ผํ๋ค๊ณ ํ๋ค.
<video src="./videourl" autoplay loop muted></video>
๐ Visual ์์ญ
์ฒ์์ ๊ฐ๊ฐ ์์ญ์ ์ก๊ณ Background๋ฅผ ์ฃผ์๋๋ฐ ์ด๋ฏธ์ง ์์ญ๊ณผ ํ
์คํธ ์์ญ์ ๋ฐ๋ก ์ก๊ณ ์ฝ๋ฉํ๋ ๋ฐฉ๋ฒ์ด ๋ ๊ฐ๋จํ๋ค.
๐ MarkUp
์ด๋ฏธ์ง๊ฐ absolute๋ก ๋ถ์ด์ ๋ง์ง๋ง ์ด๋ฏธ์ง๋ถํฐ ๋ณด์ผ ๊ฒ์ด๊ธฐ ๋๋ฌธ์ ์ญ์์ผ๋ก ์ฝ๋ฉํ๋ค.
<section class="sc-showcase">
<h2 class="blind">๋น์ฃผ์ผ์์ญ</h2>
<div class="group-visual">
<figure class="img-box"><img src="./asset/images/img-showcase03-pc.jpg" alt></figure>
<figure class="img-box"><img src="./asset/images/img-showcase02-pc.jpg" alt></figure>
<figure class="img-box"><img src="./asset/images/img-showcase01-pc.jpg" alt></figure>
</div>
<div class="group-text">
<div class="text-bg"></div>
<p class="t01">๊ธฐ๋กํ๊ณ </p>
<p class="t02">์ฆ๋ช
ํ๊ณ </p>
<p class="t03">์ฑ์ฅํ๊ธฐ</p>
</div>
<div class="desc">
<div class="text-bg"></div>
<p>
์ํฐํ๋ผ์ด์ฆ๋ธ๋ก์ฒด์ธ์ ๋ธ๋ก์ฒด์ธ ๋คํธ์ํฌ<br>
DATA ID๋ฅผ ํ์ฉํด ๊ทธ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ณ ์๋ก์ด ๋ฐฉ์์<br>
์ ์ํ๊ณ ์ ํฉ๋๋ค.
</p>
</div>
</section>
๐ CSS
์ด๋ฏธ์ง ์์ญ๊ณผ ํ
์คํธ ์์ญ์ absolute๋ก ๋ถ์ฌ์ฃผ๊ณ , ๊ฐ ์์ญ์ ๋๋น์ ๋์ด๋ฅผ ์ก์์ค๋ค.
ํฌ์ธํธ๋ ๋ค๋ฅธ ์์ญ์ ๋์ด๋ 100vh๋ก ์ก๊ณ , ์ด๋ฏธ์ง๋ฅผ ๋ด๋ div์์ญ๋ง 100%๋ก ์ก๊ธฐ !
๊ทธ๋ฆฌ๊ณ overflow:hidden;์ผ๋ก height๊ฐ์ด ์๋ฆฌ๋ ๋ถ๋ถ์์ ๋์น๋ ์์ญ์ ์๋ณด์ด๊ฒ ํ๋ค.
.sc-showcase{
position: relative;
width: 100%; height: 100vh;
}
.sc-showcase .group-visual{
position: absolute;
top: 0; left: 0;
width: 100%; height: 100vh;
}
.sc-showcase .group-visual .img-box{
position: absolute;
top: 0; left: 0;
z-index: -2;
width: 100%; height: 100%;
overflow: hidden;
}
.sc-showcase .group-visual img{
width: 100%; height: 100vh;
object-fit:cover;
}
.sc-showcase .group-text{
position:absolute;
top: 0; left: 0;
width: 100%; height: 100vh;
.
.
}
.sc-showcase .desc{
position:absolute;
top: 0; left: 0;
width: 100%; height: 100vh;
.
.
}
๐ Animation
์ด๋ฏธ์ง ๋์ด๊ฐ๋ ํ์ด๋ฐ์ด๋ ํ
์คํธ ๋ํ๋๊ณ ์ฌ๋ผ์ง๋ ํ์ด๋ฐ์ ์ ๋ฐฐ์นํด์ ์ ๋๋ฉ์ด์
์ ๋ง๋ค์ด์ค๋ค .
์ด๋ฏธ์ง ๋์ด๊ฐ๋๊ฑด 100%์๋ height๊ฐ์ 0์ผ๋ก ๋ฐ๊ฟ์ ๊ตฌํํจ.
showcase
.addLabel('a')
.fromTo(".sc-showcase .group-text .text-bg", {backgroundColor:"rgba(0,0,0,0.0)"}, {backgroundColor:"rgba(0,0,0,0.6)",duration:20},"a")
.from(".sc-showcase .group-text", {autoAlpha:0,duration:20},"a")
.addLabel('b')
.to(".sc-showcase .group-text .text-bg", {backgroundColor:"rgba(0,0,0,0.0)",duration:20},"b")
.to(".sc-showcase .t01", {xPercent:100,duration:20},'b')
.to(".sc-showcase .t03", {xPercent:-100,duration:20},'b')
.addLabel('c')
.to(".sc-showcase .t01", {autoAlpha:0,duration:20},'c')
.to(".sc-showcase .t02", { autoAlpha:0,duration:20},'c')
.to(".sc-showcase .t03", {autoAlpha:0,duration:20},'c')
.to(".sc-showcase .img-box:nth-child(3)",{height:0,duration:20})
.to(".sc-showcase .img-box:nth-child(2)",{height:0,duration:20})
.to(".sc-showcase .desc .text-bg",{backgroundColor:"rgba(0,0,0,0.4)", duration:20},)
.from(".sc-showcase .desc",{autoAlpha:0,duration:20})
๐ DATA ์์ญ ๋ชจ์ ๋ถ์
โ .group-hori ์์ญ์ด ์ํ์ผ๋ก ์คํฌ๋กค ๋จ, ๋ง์ง๋ง ์นด๋๋ ๊ณ ์
โก .group-scroll ์์ญ์ด ์์ง์ผ๋ก ์คํฌ๋กค ๋จ
โข โก๋ฒ์ด ์งํ๋๋ฉด์ ์นด๋ ๋ฆฌ์คํธ2 ์ ์ฒซ๋ฒ์งธ ์นด๋๊ฐ ํ์ด๋์ธ๋๋ฉด์ โ ์์ ๊ณ ์ ๋ ์นด๋๋ฅผ ๋ฎ์ (์๋ณด์ด๊ฒ)
โฃ ๋๋จธ์ง ์นด๋๊ฐ ์คํฌ๋กค๋์ด ์ฌ๋ผ์ค๊ณ , โข์์ ๋ํ๋ ์นด๋ ๋ค๋ก ๊ฒน์ณ์ง
์๊ฐ์ ๊ฐ์ฅ ๋ง์ด ์ก์๋จน์ ๋ถ๋ถ์ด์๋ค.. ๐
๋ชจ์
์์ฒด๋ ๊ตฌํํ ๋ง ํ๋๋ฐ ํ๋ฉด ๋๋น๋ ๋์ด๊ฐ ์ค์ด๋ค๋ฉด ์๊พธ ์์น๊ฐ ๋ฐ๋์ด์ ํ๋ค์๋ค.
๐ ์ปจํ ์ธ ๋๋น์ ์ ๋์ ์ผ๋ก ๋ฐ์ํ๋ ๊ฐ๋ก ์คํฌ๋กค
์ฐฝ ํฌ๊ธฐ๋ฅผ ์ค์ด๊ฑฐ๋ ๋๋ฆด๋๋ ๊ฐ๋ก ์คํฌ๋กค ์ปจํ
์ธ ์ ๋์ ์ด ์ฐฝ ๋๋น ๋์ ๊ณผ ๋ง๊ฒ ์ ๊ฒฝ์ผ๋ค.
์ปจํ
์ธ ๋๋น์ ํ๋ฉด๋๋น๋ฅผ ๋ณ์์ ๋ฃ์ด์ ์ฐ์ฐํด๋ณด๊ฑฐ๋ ๋ฐฉ๋ฒ์ ์ฌ๋ฌ๊ฐ์ง์์ง๋ง ์ฌ๋ฌ๊ฐ์ง ์๋๋ฅผ ํด๋ณธ๋์
๊ฐ์ฅ ๊ฐ๋จํ ์ฝ๋๋ ์ด๊ฑฐ์๋ค.
.to(".sc-economy .group-hori",{xPercent:-100,x:"100vw",duration:4},"a")
โ xPercent:-100: ์ปจํ
์ธ ์ ๋๋น๋งํผ ์ผ์ชฝ์ผ๋ก ๋ฐ์ด๋ฒ๋ฆฐ๋ค
โก x:"100vw": ์ผ์ชฝ์ผ๋ก ๋ฐ์๋๊ฑธ ํ๋ฉด๋๋น๋งํผ ๋ค์ ์ค๋ฅธ์ชฝ์ผ๋ก ๋ก๊ฒจ์จ๋ค
์ด๊ฑธ ๋์์ ์คํํ๋ฉด ์์ฝ๊ฒ ๋ง์ถ์์๋ค
์ด๋ ๊ฒ ์ฌ์ด๊ฑธ ํค๋งค๋ค๋ .. ๐ถ๐ซ๏ธ
๐ ๋งจ ์๋์์ Top๋ฒํผ Position ๋ณํ.
Top๋ฒํผ์ด position:fixed๋ก ํญ์ ๊ฐ์ ์์ญ์ ๋ถ์ด์๋ค๊ฐ ํธํฐ๊น์ง ์คํฌ๋กค์ด ๋ด๋ ค์ค๋ฉด fixed ์์ฑ์ด ์ฌ๋ผ์ง๋ค. ์ด ๋ถ๋ถ์ ScrollTrigger์ ํด๋์ค ์ปจํธ๋กค๋ก ์ฝ๊ฒ ๊ตฌํํ ์ ์๋ค.
#topBtn a{
position: fixed;
bottom: 40px; right: 100px;
.
.
}
#topBtn a.fixed{
position: absolute;
right: 100px; bottom:100px;
}
ScrollTrigger.create({
trigger: ".footer",
start: "0% 100%",
end: "110% 100%",
scrub: true,
onEnter:function(){
$('#topBtn a').addClass('fixed');
},
onLeaveBack:function(){
$('#topBtn a').removeClass('fixed');
}
});
๐ ํ ๋ฐฉํฅ์ผ๋ก ๊ณ์ ํ๋ฌ๊ฐ๋ ํ ์คํธ ๋ฐฐ๋
ํ ๋ฐฉํฅ์ผ๋ก ๋์์ด ํ๋ฌ๊ฐ๋ ๋ฐฐ๋๋ keyframe์ ํ์ฉํด์ ๊ตฌํํด์ฃผ์๋ค.
๋ฌดํ์ผ๋ก ํ
์คํธ๊ฐ ๋์ค๋๊ฒ์ฒ๋ผ ๋ณด์ด์ง๋ง ์ฌ์ค ํธ๋ฆญ์ด๋ค. ํ ๋ธ๋ญ ๊ฐ๋ฉด ๋ค์ ๋๋์์ค๋ ๊ตฌ์กฐ๋ก ๋ง๋ค๋ฉด ๋จ.
<section class="sc-banner02">
<h2 class="blind">Join us</h2>
<div class="banner-overflow">
<span>JOIN <i>us</i></span>
<span>JOIN <i>us</i></span>
<span>JOIN <i>us</i></span>
<span>JOIN <i>us</i></span>
<span>JOIN <i>us</i></span>
<span>JOIN <i>us</i></span>
<span>JOIN <i>us</i></span>
<span>JOIN <i>us</i></span>
<span>JOIN <i>us</i></span>
<span>JOIN <i>us</i></span>
<span>JOIN <i>us</i></span>
<span>JOIN <i>us</i></span>
</div>
</section>
'Code Review' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
์ฌ๋ฆฌ๋ธ์ ์จ๋ผ์ธ๋ชฐ (์ ์ํ PC, Mobile) (1) | 2024.01.31 |
---|---|
๋ค์ฐ์คํผ์ค (0) | 2023.09.19 |
NAVER Careers (0) | 2023.02.25 |
์์ธ์์ฒญ (0) | 2023.02.17 |
๋น์ ์ด ์ข์ํ ๋งํ ์ฝํ ์ธ
์์คํ ๊ณต๊ฐ ๊ฐ์ฌํฉ๋๋ค