THE ONE BURGER.

์ „ํ˜œ๋ฆฐยท2024๋…„ 4์›” 1์ผ
0

Portfolio

๋ชฉ๋ก ๋ณด๊ธฐ
6/11

๐Ÿ’ป THE ONE BURGER ํด๋ก  ์ฝ”๋”ฉ

  • ์‚ฌ์ดํŠธ๋ช…: THE ONE BURGER
  • ์ œ์ž‘๊ธฐ๊ฐ„: 24.03.24 ~ 24.03.27(3์ผ ์†Œ์š”)
  • ์‚ฌ์šฉ์–ธ์–ด: html, css, js
  • ๋ถ„๋ฅ˜: ๋ฐ˜์‘ํ˜•

๐Ÿ” Main Point

  • Swiper๋ฅผ ํŠน์ • ํ•ด์ƒ๋„์—์„œ๋งŒ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์„ ๋•Œ
  • ์›น ์‚ฌ์ดํŠธ์— ๋จธ๋ฌด๋ฅธ ์‹œ๊ฐ„ ๊ตฌํ•˜๊ธฐ
  • ์Šคํฌ๋กค ์ง„ํ–‰๋ฅ ๋กœ ๋น„๋””์˜ค ์žฌ์ƒ ์‹œํ‚ค๊ธฐ
  • position: fixed๊ฐ€ ์ž‘๋™ํ•˜์ง€ ์•Š์„ ๊ฒฝ์šฐ
  • [GSAP] ํƒ€์ดํ•‘ ํšจ๊ณผ

Swiper๋ฅผ ํŠน์ • ํ•ด์ƒ๋„์—์„œ๋งŒ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์–ด์š”.

1) ํ•ด์ƒ๋„์— ๋”ฐ๋ผ Swiper ํ˜ธ์ถœ

์ฒ˜์Œ์— ํƒœ๋ธ”๋ฆฟ ๊ตฌ๊ฐ„๊นŒ์ง€๋งŒ swiper ์‚ฌ์šฉ์„ ํฌ๋งํ•˜์—ฌ ์•„๋ž˜์™€ ๊ฐ™์ด ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ–ˆ์—ˆ๋‹ค. ํ•˜์ง€๋งŒ ํ•ด๋‹น์ฝ”๋“œ๋Š” 1023px ์ดํ•˜์—์„œ 1024px ์ด์ƒ์œผ๋กœ ํ•ด์ƒ๋„๋ฅผ ๋Š˜๋ฆด ๊ฒฝ์šฐ swiper๊ฐ€ ๊ณ„์† ์‹คํ–‰๋˜์—ˆ๋‹ค.
์ฆ‰, 1023px ์ดํ•˜์—์„œ swiper๋ฅผ ํ•œ๋ฒˆ ํ˜ธ์ถœํ•˜๋ฉด ๋ชจ๋“  ๊ตฌ๊ฐ„์—์„œ ๊ณ„์† ํ˜ธ์ถœ๋˜์–ด ์›ํ•˜๋Š” ๊ตฌ๊ฐ„์—์„œ ์Šค์™€์ดํผ ์‚ฌ์šฉ์„ ์ค‘์ง€์‹œํ‚ฌ ์ˆ˜ ์—†์—ˆ๋‹ค.

    let windowWidth = window.innerWidth;
    
    function initSwiper() {
      const swiper = new Swiper('.swiper', {
      slidesPerView: 2,
      spaceBetween: 5,
      loop: true
    })
    }

    if (windowWidth <= 1023) {
      initSwiper();
    } else {
      // swiper ์‹คํ–‰ ์•ˆํ•จ
    }
    
    window.addEventListener('resize', function() {
      windowWidth = window.innerWidth;
      
      if (windowWidth <= 1023) {
        initSwiper();
      }
    });

2) Swiper์˜ ํƒ€์ž… ํ™•์ธํ•˜๊ธฐ

  • ํ˜ธ์ถœ๋œ swiper์˜ ํƒ€์ž…์€ object์ด๊ณ , ํ˜ธ์ถœ๋˜์ง€ ์•Š์€ swiper์˜ ํƒ€์ž…์€ undefined ์ด๋‹ค.
  • ๋ธŒ๋ผ์šฐ์ €์˜ width๊ฐ€ 1024 ๋ฏธ๋งŒ์ผ ๋•Œ swiper์˜ ํƒ€์ž…์„ ํ™•์ธํ•˜์—ฌ undefined๋ผ๋ฉด swiper๋ฅผ ํ˜ธ์ถœํ•˜๊ณ , ํƒ€์ž…์ด object๋ผ๋ฉด ์ด๋ฏธ ํ˜ธ์ถœ๋˜์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ๋” ์ด์ƒ swiper๋ฅผ ํ˜ธ์ถœํ•˜์ง€ ์•Š๋„๋ก ํ•˜๋ฉด swiper ์—๋Ÿฌ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋‹ค.
console.log('1023 ์ดํ•˜', typeof swiper)
console.log('1024 ์ด์ƒ', typeof swiper)

3) Swiper ์ œ๊ฑฐ

  • ์Šฌ๋ผ์ด๋” ์ธ์Šคํ„ด์Šค๋ฅผ ์‚ญ์ œํ•˜๋Š” ๋ฉ”์„œ๋“œ์ธ swiper.destroy()๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค.

  • ์ด๋ฏธ ํ˜ธ์ถœ๋œ swiper์— destroy ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด swiper๊ฐ€ ์ œ๊ฑฐ๋œ๋‹ค. ํ•˜์ง€๋งŒ ์ด๋ฏธ ํ˜ธ์ถœ๋œ swiper๋Š” ์ œ๊ฑฐ ํ•  ๊ฒฝ์šฐ์—๋„ object ํƒ€์ž…์ด๋‹ค. ๋”ฐ๋ผ์„œ swiper๋ฅผ ์ œ๊ฑฐํ•จ๊ณผ ๋™์‹œ์— ํƒ€์ž…๋„ undefined๋กœ ๋ณ€๊ฒฝํ•ด์•ผ ํ•œ๋‹ค.


๐Ÿ“‚ ์™„์„ฑ์ฝ”๋“œ

    let swiper = undefined; // ๋ณ€์ˆ˜ ์„ ์–ธ
    
    function initSwiper() {
      let windowWidth = window.innerWidth;
      
      if(windowWidth <= 1023 && swiper == undefined) {
        // ์žฌํ• ๋‹น
        swiper = new Swiper('.swiper', {
          slidesPerView: 2,
          spaceBetween: 5,
          loop: true
        })
      } else if(windowWidth >= 1024 && swiper != undefined) {
        swiper.destroy(); // ์Šค์™€์ดํผ ์ œ๊ฑฐ
        swiper = undefined; // ํƒ€์ž… ๋ณ€๊ฒฝ(object -> undefined)
      }
    }
    initSwiper();

    window.addEventListener('resize', initSwiper);



์›น ์‚ฌ์ดํŠธ์— ๋จธ๋ฌด๋ฅธ ์‹œ๊ฐ„ ๊ตฌํ•˜๊ธฐ

๋‚ด๊ฐ€ ํด๋ก  ์ฝ”๋”ฉํ•œ THE ONE BURGER ์‚ฌ์ดํŠธ๋Š” ํŽ˜์ด์ง€๋ฅผ ๋ฐฉ๋ฌธํ•œ ์ˆœ๊ฐ„ ๋ถ€ํ„ฐ ์ข…๋ฃŒํ•  ๋•Œ ๊นŒ์ง€ ์‹ค์‹œ๊ฐ„์œผ๋กœ ์–ผ๋งˆ๋‚˜ ๋จธ๋ฌผ๋Ÿฌ ์žˆ์—ˆ๋Š”์ง€ ๋ณด์—ฌ์ฃผ๋Š” UI๊ฐ€ ์กด์žฌํ•œ๋‹ค. ํ•˜๋‹จ์— ๊ณ ์ •๋˜์–ด ์žˆ๋‹ค๊ฐ€ ํŠน์ • ๊ตฌ๊ฐ„์—์„œ ์‚ฌ๋ผ์ง€๋ฉด์„œ ํŠน์ • ํ”ผ์ณ์—์„œ ๊ณ„์†์ ์œผ๋กœ ๋ณด์—ฌ์ฃผ๋Š” ์žฌ๋ฏธ์žˆ๋Š” ๋ถ€๋ถ„์ด๋‹ค.

๋‚ด๊ฐ€ ์‚ฌ์šฉํ•œ ๋ฐฉ๋ฒ•์€ ์•„๋ž˜์™€ ๊ฐ™๋‹ค.

1) ๋กœ๋“œ์‹œ์ ์— ํ˜„์žฌ ์‹œ๊ฐ„์„ ๊ตฌํ•ด์„œ defaultTime ๋ณ€์ˆ˜์— ์ €์žฅํ•œ๋‹ค.

let defaultTime = 0;

window.addEventListener('load', function() {
  defaultTime = new Date().getTime(); // ๋กœ๋“œ ์‹œ์  ํ˜„์žฌ ์‹œ๊ฐ„ ๊ตฌํ•˜๊ธฐ
})

2) ์ดํ›„ 1์ดˆ๋‹น ํ•œ ๋ฒˆ์”ฉ ํ˜„์žฌ ์‹œ๊ฐ„์„ ๋ถˆ๋Ÿฌ์™€์„œ nowTime ๋ณ€์ˆ˜์— ์ €์žฅํ•œ๋‹ค.
๊ทธ๋ฆฌ๊ณ , nowTime - defaultTime ์„ new Date()์— ๋„ฃ์–ด ๋ถ„๊ณผ ์ดˆ๋ฅผ ๊ตฌํ•œ๋‹ค.
์ด ๋•Œ setTimeout์„ ์žฌ๊ท€์‹คํ–‰ ํ•˜๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ ๋ฃจํ”„๊ฐ€ ๋Œ๋„๋ก ํ•˜์˜€๋‹ค. (์ฆ‰, setInterval ์‚ฌ์šฉ X)

let timeStart;

timeStart = () => {
  const timeEl = document.querySelector('.time');
  const nowTime = new Date().getTime();
  const newTime = new Date(nowTime - defaultTime);
  const minutes = String(newTime.getMinutes()).padStart(2, '0'); // ๋ถ„
  const seconds = String(newTime.getSeconds()).padStart(2, '0'); // ์ดˆ

  setTimeout(() => {
    timeEl.textContent = `${minutes}:${seconds}`;

    timeStart(); // ์žฌ๊ท€ํ˜ธ์ถœ
  }, 1000);
}
timeStart(); // ํ•จ์ˆ˜์‹คํ–‰

๐Ÿ“‚ ์™„์„ฑ์ฝ”๋“œ

setTimeout์œผ๋กœ setInterval ํ•จ์ˆ˜ ๊ตฌํ˜„ํ•˜๊ธฐ

ํŠน์ • ์‹œ๊ฐ„๋งˆ๋‹ค ํ•จ์ˆ˜๋ฅผ ๋ฌดํ•œ ๋ฐ˜๋ณต์‹œํ‚ฌ ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์—๋Š” setInterval()๊ณผ setTimeout()์˜ ์žฌ๊ท€ ํ•จ์ˆ˜(์Šค์Šค๋กœ๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ํ•จ์ˆ˜)๊ฐ€ ์žˆ๋‹ค. ๋‘˜์˜ ๊ธฐ๋Šฅ์€ ๋ฌดํ•œ ๋ฐ˜๋ณต์ด๋ผ๋Š” ์ ์—์„œ ๊ฐ™์ง€๋งŒ ๋ฏธ์„ธํ•œ ์ฐจ์ด๊ฐ€ ์กด์žฌํ•œ๋‹ค.

setInterval()์€ ๋”œ๋ ˆ์ด ์‹œ๊ฐ„์ด ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ํ•˜๋Š” ๊ฒƒ๊นŒ์ง€ ํฌํ•จ๋˜์–ด ์žˆ๋‹ค.

์ฆ‰, ํ•จ์ˆ˜์˜ ์ž‘๋™ ์‹œ๊ฐ„๊นŒ์ง€ ๋”œ๋ ˆ์ด ์‹œ๊ฐ„์— ํฌํ•จ๋˜์–ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์•„๋ฌด๋ž˜๋„ ๋”œ๋ ˆ์ด ์‹œ๊ฐ„์ด ๋ช…ํ™•ํ•˜์ง€ ์•Š์„ ์ˆ˜ ์žˆ๋‹ค.

ํ•˜์ง€๋งŒ, setTimout()์˜ ์žฌ๊ท€ ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•˜๊ฒŒ ๋˜๋ฉด ํ•จ์ˆ˜์˜ ์ž‘๋™์ด ๋ชจ๋‘ ๋๋‚œ ํ›„ ๋”œ๋ ˆ์ด๊ฐ€ ์ •ํ•ด์ง„ ์‹œ๊ฐ„ ๋งŒํผ ์ž‘๋™๋œ๋‹ค. ์ฆ‰, ๋‚ด๊ฐ€ ์ •ํ•œ ๋”œ๋ ˆ์ด ์‹œ๊ฐ„์ด ๋ช…ํ™•ํ•˜๊ฒŒ ๋ณด์žฅ๋ฐ›๋Š”๋‹ค๋Š” ์˜๋ฏธ์ธ ๊ฒƒ์ด๋‹ค.



์Šคํฌ๋กค ์ง„ํ–‰๋ฅ ๋กœ ๋น„๋””์˜ค ์žฌ์ƒ ์‹œํ‚ค๊ธฐ

์•ž์„œ ๋น„๋””์˜ค ์†์„ฑ์— ๋Œ€ํ•ด ๋จผ์ € ์ •๋ฆฌํ•ด ๋ณด์•˜๋‹ค.

currentTime

currentTime ์†์„ฑ์€ ๋น„๋””์˜ค์˜ ํ˜„์žฌ ์žฌ์ƒ ์œ„์น˜๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋ฉฐ ์„ค์ •๋„ ๊ฐ€๋Šฅํ•˜๋‹ค.
์ด ์†์„ฑ์„ ์„ค์ •ํ•˜๋Š” ๊ฒฝ์šฐ, ์žฌ์ƒ์ด ์ง€์ •๋œ ์œ„์น˜๋กœ ์ด๋™ํ•œ๋‹ค.

const video = document.querySelector('video');

video.currentTime = 5; // ๋น„๋””์˜ค ์žฌ์ƒ์˜ ํ˜„์žฌ ์œ„์น˜(์ดˆ)๋ฅผ ์„ค์ •
console.log(video.currentTime);

timeupdate ์ด๋ฒคํŠธ

currentTime์ด ์—…๋ฐ์ดํŠธ ๋˜๋ฉด ์ด๋ฒคํŠธ๊ฐ€ ์‹œ์ž‘๋œ๋‹ค.

<div class="video">
  <video autoplay muted controls>
    <source src="./assets/videos/section-home.mp4" type="video/mp4" />
  </video>
</div>
const video = document.querySelector('video');

video.addEventListener('timeupdate', function() {
  console.log(video.currentTime); // ๋น„๋””์˜ค์˜ ํ˜„์žฌ ์‹œ๊ฐ„ ์ถœ๋ ฅ
})

duration

๋น„๋””์˜ค์˜ ์ „์ฒด ๊ธธ์ด๋Š” duration ์†์„ฑ์„ ์ด์šฉํ•˜์—ฌ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๋‹ค.
ํ•˜์ง€๋งŒ ๋น„๋””์˜ค ๋ฐ์ดํ„ฐ์— ๋Œ€ํ•œ ๋กœ๋”ฉ์ด ๋๋‚˜์ง€ ์•Š์€ ์ƒํƒœ์—์„œ duration ๊ฐ’์„ ํ˜ธ์ถœํ•˜๊ฒŒ ๋˜๋ฉด NaN ๊ฐ’์ด ๋‚˜์˜จ๋‹ค. ๋”ฐ๋ผ์„œ ๋น„๋””์˜ค ๋กœ๋“œ๊ฐ€ ๋๋‚œ ์‹œ์ ์— ํ˜ธ์ถœํ•˜๋Š” loadedmetadata ์ด๋ฒคํŠธ๋ฅผ ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜๋ฉด ๋น„๋””์˜ค ๊ธธ์ด๋ฅผ ์ •์ƒ์ ์œผ๋กœ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๋‹ค.

const video = document.querySelector('video');

console.log(video.duration); // NaN

video.addEventListener('loadedmetadata', function() {
  console.log(video.duration); // 8.106
})

Chrome์—์„œ ๋น„๋””์˜ค ์ž๋™ ์žฌ์ƒ

ํฌ๋กฌ์—์„œ๋Š” ์Œ์†Œ๊ฑฐ๋œ ๊ฒฝ์šฐ์— ๋น„๋””์˜ค ์ž๋™ ์žฌ์ƒ์€ ํ—ˆ์šฉํ•œ๋‹ค๊ณ  ๋ช…์‹œ๋˜์–ด ์žˆ๋‹ค.
๋”ฐ๋ผ์„œ video ํƒœ๊ทธ์— autoplay ์†์„ฑ๊ณผ muted๋ฅผ ํ•จ๊ป˜ ์ง€์ •ํ•ด ์ฃผ์–ด์•ผ ์ •์ƒ์ ์œผ๋กœ ์ž๋™ ์žฌ์ƒ์ด ๋œ๋‹ค.

<video autoplay muted>
  <source src="./assets/videos/section-home.mp4" type="video/mp4" />
</video>

ํฌ๋กฌ ์ž๋™์žฌ์ƒ ์ •์ฑ…

GSAP์˜ ScrollTrigger๋ฅผ ์ด์šฉํ•ด์„œ ๋น„๋””์˜ค ์žฌ์ƒ ์‹œํ‚ค๊ธฐ

  • ์—…๋ฐ์ดํŠธ๋  ๋•Œ๋งˆ๋‹ค ์‹คํ–‰๋˜๋Š” onUpdate ๋ฉ”์„œ๋“œ ์‚ฌ์šฉํ•˜๊ธฐ
  • ์• ๋‹ˆ๋ฉ”์ด์…˜์˜ ์ง„ํ–‰๋ฅ ์„ ๋‚˜ํƒ€๋‚ด๋Š” progress ํ™œ์šฉํ•˜๊ธฐ(0๊ณผ 1์‚ฌ์ด์˜ ์ˆซ์ž)
  • ๋น„๋””์˜ค ์ „์ฒด ๊ธธ์ด์™€ ์Šคํฌ๋กค ์ด๋ฒคํŠธ ์ง„ํ–‰๋ฅ ์„ ๊ณฑํ•œ ๊ฐ’์„ ๋น„๋””์˜ค ํ˜„์žฌ ์žฌ์ƒ์‹œ์ ์œผ๋กœ ์„ค์ •ํ•˜๊ธฐ
  const video = document.querySelector('video');

  ScrollTrigger.create({
    trigger: 'video',
    start: 'top top',
    end: '+=3000',
    pin: true,
    scrub: 0,
    onUpdate: function(self) {
      duration = 6;
      video.currentTime = duration * self.progress; // ๋น„๋””์˜ค ํ˜„์žฌ ์žฌ์ƒ์‹œ์  = ์ „์ฒด ๊ธธ์ด * ์ด๋ฒคํŠธ ์ง„ํ–‰๋ฅ 
    }
  })

๐Ÿ“‚ ์™„์„ฑ์ฝ”๋“œ



position: fixed๊ฐ€ ์ž‘๋™ํ•˜์ง€ ์•Š์„ ๊ฒฝ์šฐ

์•„๋ž˜๋Š” MDN ๊ณต์‹ ๋ฌธ์„œ์— ๋‚˜์™€ ์žˆ๋Š” fixed ์†์„ฑ์— ๋Œ€ํ•œ ์„ค๋ช…์ด๋‹ค.

์š”์†Œ๋ฅผ ์ผ๋ฐ˜์ ์ธ ๋ฌธ์„œ ํ๋ฆ„์—์„œ ์ œ๊ฑฐํ•˜๊ณ , ํŽ˜์ด์ง€ ๋ ˆ์ด์•„์›ƒ์— ๊ณต๊ฐ„๋„ ๋ฐฐ์ •ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋Œ€์‹  ๋ทฐํฌํŠธ์˜ ์ดˆ๊ธฐ ์ปจํ…Œ์ด๋‹ ๋ธ”๋ก์„ ๊ธฐ์ค€์œผ๋กœ ์‚ผ์•„ ๋ฐฐ์น˜ํ•ฉ๋‹ˆ๋‹ค.
๋‹จ, ์š”์†Œ์˜ ์กฐ์ƒ ์ค‘ ํ•˜๋‚˜๊ฐ€ transform, perspective, filter ์†์„ฑ ์ค‘ ์–ด๋Š ํ•˜๋‚˜๋ผ๋„ none์ด ์•„๋‹ˆ๋ผ๋ฉด ๋ทฐํฌํŠธ ๋Œ€์‹  ๊ทธ ์กฐ์ƒ์„ ์ปจํ…Œ์ด๋‹ ๋ธ”๋ก์œผ๋กœ ์‚ผ์Šต๋‹ˆ๋‹ค. - MDN Web Docs

์ด๋ฒˆ์— ํฌํŠธํด๋ฆฌ์˜ค ์ž‘์—…์„ ํ•˜๋ฉด์„œ, transform ์†์„ฑ์ด ์ ์šฉ๋˜์–ด ์žˆ๋Š” ๋ถ€๋ชจ ์ปจํ…Œ์ด๋„ˆ ์•ˆ์— ์žˆ๋Š” ์ž์‹ ์š”์†Œ์— position: fixed๋ฅผ ์ฃผ์—ˆ๋Š”๋ฐ ์ œ๋Œ€๋กœ ๋™์ž‘ํ•˜์ง€ ์•Š์•„ ์›์ธ์„ ์ฐพ์•„ ๋ณด๋‹ค ์•„๋ž˜์™€ ๊ฐ™์€ ์‚ฌ์‹ค์„ ์•Œ๊ฒŒ ๋˜์—ˆ๋‹ค.

fixed ์†์„ฑ์€ ๋ทฐํฌํŠธ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์š”์†Œ๋ฅผ ๋ฐฐ์น˜ํ•˜๋Š” ์†์„ฑ์ด๋‹ค. ๋”ฐ๋ผ์„œ, ํŽ˜์ด์ง€์˜ ์Šคํฌ๋กค์„ ์›€์ง์—ฌ๋„ ๊ณ ์ •๋œ ์œ„์น˜์— ์ถœ๋ ฅ์ด ๋œ๋‹ค.

ํ•˜์ง€๋งŒ ๋ถ€๋ชจ ์š”์†Œ์— transform ์†์„ฑ์„ ์ ์šฉํ•˜๋ฉด ์ด์•ผ๊ธฐ๊ฐ€ ๋‹ฌ๋ผ์ง€๊ฒŒ ๋œ๋‹ค. transform์ด ์ ์šฉ๋œ ์ปดํฌ๋„ŒํŠธ๋Š” ์ƒˆ๋กœ์šด ๋ทฐํฌํŠธ๋กœ ์„ค์ •์ด ๋˜๋Š”๋ฐ, ์ด ๋•Œ ์ž์‹ ์š”์†Œ์˜ ์Šคํƒ€์ผ์— fixed ์†์„ฑ์ด ์ ์šฉ๋˜์–ด ์žˆ์œผ๋ฉด ์ƒˆ๋กญ๊ฒŒ ์„ค์ •๋œ ๋ทฐํฌํŠธ๊ฐ€ ์ž์‹์—๊ฒŒ๋„ ์˜ํ–ฅ์„ ๋ฏธ์น˜๊ฒŒ ๋œ๋‹ค.

๋”ฐ๋ผ์„œ ์Šคํฌ๋กค์„ ์›€์ง์ด๋ฉด ๋ถ€๋ชจ ์š”์†Œ๋ฅผ ๋”ฐ๋ผ fixed ์†์„ฑ์ด ์ ์šฉ๋œ ์ž์‹๋„ ๋”ฐ๋ผ์„œ ์˜ค๊ฒŒ ๋˜๋Š” ๋ฒ„๊ทธ๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค.

์—ฌ๊ธฐ์„œ fixed ์†์„ฑ์„ ์ ์šฉ ์‹œํ‚ค๊ธฐ ์œ„ํ•œ ๋‘๊ฐ€์ง€ ๋ฐฉ๋ฒ•์ด ์žˆ๋‹ค.
1) ๋ถ€๋ชจ์˜ transform์„ ์ œ๊ฑฐํ•˜๋Š” ๊ฒƒ
2) position: sticky๋กœ ์ ์šฉํ•˜๋Š” ๊ฒƒ

sticky๋Š” fixed์™€ ๋‹ฌ๋ฆฌ ๊ณต๊ฐ„์„ ์ฐจ์ง€ํ•œ๋‹ค๋Š” ์ฐจ์ด์ ์ด ์žˆ์ง€๋งŒ, ์Šคํƒ€์ผ์„ ์ด์šฉํ•œ๋‹ค๋ฉด ์–ด๋ ต์ง€ ์•Š๊ฒŒ ๊ทธ๋ถ€๋ถ„์„ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋‹ค.



[GSAP] ํƒ€์ดํ•‘ ํšจ๊ณผ

GSAP์˜ TextPlugin์œผ๋กœ ํƒ€์ดํ•‘ ํšจ๊ณผ๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค.

gsap.to('.text', {
   duration: 3,
   ease: "none",
   text: "ํƒ€์ดํ•‘ ํšจ๊ณผ๋ฅผ ๋‚ผ ์ˆ˜ ์žˆ์–ด์š”!",
   repeat: -1 // ๋ฌดํ•œ ๋ฐ˜๋ณต
});

๐Ÿ’ก ์‹ค์ œ ํ™”๋ฉด ๋ณด๊ธฐ


์ฐธ๊ณ  ์‚ฌ์ดํŠธ
https://lpla.tistory.com/136
https://im-developer.tistory.com/53
https://shawnkim.tistory.com/23
https://lpla.tistory.com/166
https://blog.pumpkin-raccoon.com/120

profile
์ฝ”๋”ฉ์ชผ์•„

0๊ฐœ์˜ ๋Œ“๊ธ€