์ƒˆ์†Œ์‹

์ธ๊ธฐ ๊ฒ€์ƒ‰์–ด

Code Review

์—”ํ„ฐํ”„๋ผ์ด์ฆˆ๋ธ”๋ก์ฒด์ธ

  • -

 

๐Ÿ‘‰ ์‚ฌ์ดํŠธ๋ช… : ์—”ํ„ฐํ”„๋ผ์ด์ฆˆ ๋ธ”๋ก์ฒด์ธ
๐Ÿ‘‰ ์ž‘์—…๊ธฐ๊ฐ„ : 6์ผ
๐Ÿ‘‰ ์‚ฌ์šฉ์–ธ์–ด : HTML5, CSS3, JQuery
๐Ÿ‘‰ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ : GSAP, Swiper
๐Ÿ‘‰ ๋ถ„๋ฅ˜ : PC ์„ธ๋ฏธ ๋ฐ˜์‘ํ˜• ์›น์‚ฌ์ดํŠธ
๐Ÿ‘‰ URL : https://codenablog.github.io/Enterprise-Blockchain/


โœ”๏ธ ๋ชจ์…˜์˜ ๋ถ„์„๊ณผ ์ดํ•ด
โœ”๏ธ 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
Contents

ํฌ์ŠคํŒ… ์ฃผ์†Œ๋ฅผ ๋ณต์‚ฌํ–ˆ์Šต๋‹ˆ๋‹ค

์ด ๊ธ€์ด ๋„์›€์ด ๋˜์—ˆ๋‹ค๋ฉด ๊ณต๊ฐ ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค.