[miniProjects] 06_Scroll Animation

๋ณด๋ฆฌยท2023๋…„ 6์›” 16์ผ
0

miniProjects

๋ชฉ๋ก ๋ณด๊ธฐ
7/47

06_Scroll Animation

๐Ÿ’ป์ฃผ์ œ : ํ™”๋ฉด์„ ์Šคํฌ๋กค์‹œ ๋‚ด๋ฆฌ๋Š” ๋ฐฉํ–ฅ์— ๋”ฐ๋ผ content๋ฐ•์Šค๊ฐ€ ์ƒ๊ธฐ๊ฑฐ๋‚˜ ์ œ๊ฑฐ๋จ.

const boxes = document.querySelectorAll('.box');

window.addEventListener('scroll', checkBoxes);

checkBoxes();

function checkBoxes() {
  const triggerBottom = window.innerHeight / 5 * 4;

  boxes.forEach(box => {
    const boxTop = box.getBoundingClientRect().top;

    if(boxTop < triggerBottom) {
      box.classList.add('show');
    } else {
      box.classList.remove('show');
    }
  })
}

๐Ÿ‘๐Ÿป ์Šคํฌ๋กค ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•  ๋•Œ๋งˆ๋‹ค ํ™”๋ฉด์— ํŠน์ • ๋น„์œจ(4/5) ์ด์ƒ ๋ณด์—ฌ์ง€๋Š” ์š”์†Œ์— 'show' ํด๋ž˜์Šค๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ , ์‚ฌ๋ผ์ง€๋Š” ์š”์†Œ์—์„œ๋Š” 'show' ํด๋ž˜์Šค๋ฅผ ์ œ๊ฑฐํ•˜๋Š” ํšจ๊ณผ๋ฅผ ์ œ๊ณตํ•œ๋‹ค.

profile
์ •์‹ ์ฐจ๋ ค ์ด ๊ฐ๋ฐ•ํ•œ ์„ธ์ƒ์†์—์„œ

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