728x90
300x250
SMALL
스크롤 이벤트를 이용하여 사용자가 페이지를 스크롤할 때마다 화면에 변화가 생기는 반은형 애니메이션을 만들ㅇ보자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>스크롤 반응형 애니메이션</title>
<style>
.section {
height: 100vh;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.section.visible {
opacity: 1;
}
</style>
</head>
<body>
<div class="section">Section 1</div>
<div class="section">Section 2</div>
<div class="section">Section 3</div>
<script>
window.addEventListener('scroll', () => {
const sections = document.querySelectorAll('.section');
sections.forEach(section => {
const rect = section.getBoundingClientRect();
if (rect.top >= 0 && rect.top <= window.innerHeight) {
section.classList.add('visible');
} else {
section.classList.remove('visible');
}
});
});
</script>
</body>
</html>
코드 설명
- 스크롤 시 각 섹션이 화면에 보일 때마다 서서히 나타나는 효과를 구현
- addEventListener는 이벤트 리스너를 추가하는 메서드로 이 메서드를 사용하면 브라우저가 특정 이벤트(예: 클릭, 스크롤 등)를 감지할 때마다 실행될 함수를 지정할 수 있다. 여기서는 scroll이벤트를 감지해서 페이지를 스크롤할 때마다 해당 함수가 실행되도록 설정
- getBoundingClientRect()는 요소의 위치와 크기를 반환하는 메서드로 요소의 상대적인 위치와 현재 뷰포트에 대한 크기를 알려준다. 이 메서드를 사용하여 각 섹션의위치를 파악하고, 화면에 들어왔을 때 visible 클래스를 추가하여 opacity를 변경한다.
- getBoundingClientRect() 반환 값은 top, right, bottom, left, width, height 등의 속성을 포함한다.
- 이 코드에서 react.top을 사용하여 각 섹션의 상단에 얼마나 가까운지 확인하고 있다.
- window.innerHeights는 브라우저 창의 보이는 영역의 높이를 나타낸다. 즉, 사용자가 볼 수 있는 화면의 크기를 말한다.
전체 동작 과정
- 페이지가 스크롤될 때마다 scroll 이벤트가 발생, 그때마다 addEventListener로 등록된 함수가 실행됨
- querySelectorAll('.section')으로 모든 .section 클래스를 가진 요소를 선택한다.
- 각 .section요소의 getBoundingClientRect()를 호출하여 해당 요소가 현재 화면에서 어디에 위치하는지 파악한다.
- rect.top 값이 화면 안쪽(window.innerHeight)에 들어오면, 해당 섹션에 visible클래스를 추가하여 애니메이션을 실행하도록 하고, 화면 밖에 있으면 클래스를 제거한다.
Section 1
Section 2
Section 3
728x90
반응형
LIST
'Front-end > 애니메이션' 카테고리의 다른 글
| 웹사이트에 스크롤 애니메이션 추가하는 가장 쉬운 방법 (0) | 2025.03.25 |
|---|---|
| 터치스크린 인터페이스에서의 인터랙션 최적화 (0) | 2025.03.22 |
| hover효과를 이용한 인터렉티브 UI 만들기 (0) | 2025.03.19 |
| 사용자 클릭 시 애니메이션을 구현하는 방법 (0) | 2025.03.18 |
| Lottie(로띠) 활용법, JSON 애니메이션을 웹에 추가하는 법 (0) | 2025.03.12 |
댓글