50 Project In 50 Days-Scroll Animation

Parkboss·2025년 9월 2일

50 Project In 50 Days

목록 보기

5/8

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Scroll Animation</title>
  </head>
  <body>
    <h1>scroll to see the animtation</h1>
    <div class="box"><h2>content</h2></div>
    <div class="box"><h2>content</h2></div>
    <div class="box"><h2>content</h2></div>
    <div class="box"><h2>content</h2></div>
    <div class="box"><h2>content</h2></div>
    <div class="box"><h2>content</h2></div>
    <div class="box"><h2>content</h2></div>
    <div class="box"><h2>content</h2></div>
    <div class="box"><h2>content</h2></div>
    <div class="box"><h2>content</h2></div>
    <div class="box"><h2>content</h2></div>
    <div class="box"><h2>content</h2></div>
    <div class="box"><h2>content</h2></div>
    <div class="box"><h2>content</h2></div>
    <div class="box"><h2>content</h2></div>
    <div class="box"><h2>content</h2></div>
    <div class="box"><h2>content</h2></div>
    <div class="box"><h2>content</h2></div>
    <div class="box"><h2>content</h2></div>
    <div class="box"><h2>content</h2></div>
    <div class="box"><h2>content</h2></div>
    <div class="box"><h2>content</h2></div>
    <div class="box"><h2>content</h2></div>
    <script src="script.js"></script>
  </body>
</html>


* {
  box-sizing: border-box;
}

body {
  background-color: #efedd6;
  font-family: 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
}
h1 {
  margin: 10px;
}
.box {
  background-color: steelblue;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400px;
  height: 200px;
  margin: 10px;
  border-radius: 10px;
  box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3);
  transform: translateX(400%);
  transition: transform 0.4s ease;
}
.box:nth-of-type(even) {
  transform: translateX(-400%);
}
.box.show {
  transform: translateX(0);
}

.box h2 {
  font-size: 45px;
}

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');
    }
  });
}

📌 이 코드의 역할

👉 페이지를 스크롤할 때 박스(.box)가 화면에 들어오면 애니메이션처럼 나타나게 해주는 코드예요.
(즉, 스크롤할 때 박스가 슬라이드되면서 보이는 효과 🎬)

🔎 코드 설명
1. .box라는 요소들 가져오기
const boxes = document.querySelectorAll('.box');

HTML에서 <div class="box"> 이런 박스를 전부 찾아서 boxes에 저장.

여러 개니까 배열 같은 덩어리(NodeList) 로 모아짐.

스크롤 이벤트 감지하기
window.addEventListener('scroll', checkBoxes);

사용자가 스크롤할 때마다 checkBoxes() 함수를 실행시킴.

즉, 스크롤 움직일 때마다 박스가 화면에 들어왔는지 확인.

처음에도 한 번 실행
checkBoxes();

스크롤 안 해도 처음 로딩될 때 한 번 실행 → 화면에 보이는 박스는 바로 나타나도록 함.

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

window.innerHeight = 현재 화면(브라우저 창)의 높이

/ 5 * 4 → 화면 높이의 80% 위치 지점을 계산

즉, "화면 아래에서 20% 남은 지점"을 기준점(triggerBottom)으로 설정

모든 박스 확인하기
boxes.forEach((box) => {
const boxTop = box.getBoundingClientRect().top;

getBoundingClientRect().top = 박스의 윗부분이 화면의 어디쯤 있는지 알려줌
(숫자가 작으면 화면 위쪽, 크면 화면 아래쪽에 있다는 뜻)

조건문으로 클래스 추가/삭제
if (boxTop < triggerBottom) {
box.classList.add('show');
} else {
box.classList.remove('show');
}

박스의 top 위치가 기준점(triggerBottom)보다 위쪽에 있으면 → 화면에 충분히 들어왔으니 .show 클래스 붙임

아직 화면에 안 들어왔으면 .show 클래스 제거

👉 CSS에서 .show에 애니메이션(슬라이드/페이드 등)을 걸어놓았기 때문에, 스크롤하면서 박스가 나타나는 효과가 나는 것!

🖼️ 비유로 설명

화면을 무대라고 생각해요 🎭

triggerBottom은 "무대 위로 올라오기 직전 라인"

박스(.box)가 그 라인을 넘어서면 조명이 켜지고(show 클래스 추가) 관객에게 보이는 것

무대 밖에 있으면 다시 조명이 꺼짐(show 제거)

Parkboss

ur gonna figure it out. just like always have.

이전 포스트

50 Project In 50 Days-Blurry Loading

다음 포스트

50 Project In 50 Days-Scroll Animation

50 Project In 50 Days

50 Project In 50 Days-Blurry Loading

50 Project In 50 Days-split-landing-page

0개의 댓글