스크롤 이벤트를 사용하여 웹 페이지 요소가 스크롤 위치에 따라 나타나거나 사라지는 효과를 만들어보겠습니다. 이 효과를 구현하려면 JavaScript를 사용하여 스크롤 이벤트를 감지하고 요소의 CSS 스타일을 변경해야 합니다.
1. HTML 파일 생성하기
먼저 텍스트 에디터(예: 메모장, Visual Studio Code, Sublime Text 등)를 열고 다음과 같이 HTML 파일을 생성합니다. 이 파일을 "index.html"로 저장합니다.
<!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="styles.css">
<script src="script.js"></script>
<title>스크롤 이벤트</title>
</head>
<body>
<div class="scroll-effect" id="scrollEffect">스크롤해서 나타나거나 사라지는 요소</div>
<div style="height: 1000px;"></div> <!-- 스크롤 가능한 공간을 만들기 위한 추가 요소 -->
</body>
</html>
2. CSS 스타일 시트 생성하기
다음으로 CSS 스타일 시트를 생성합니다. 이 파일을 "styles.css"로 저장합니다. 스타일 시트에서는 스크롤 이벤트로 나타내고 숨길 요소의 초기 스타일을 정의합니다.
/* styles.css */
.scroll-effect {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s, transform 0.5s;
}
3. JavaScript 파일 생성하기
이제 JavaScript 파일을 생성합니다. 이 파일을 "script.js"로 저장합니다. JavaScript에서 스크롤 이벤트를 처리하고 요소를 나타내고 숨기는 로직을 작성합니다.
// script.js
const scrollEffectElement = document.getElementById("scrollEffect");
function checkScroll() {
const scrollPosition = window.scrollY;
const elementOffset = scrollEffectElement.offsetTop;
const windowHeight = window.innerHeight;
if (scrollPosition + windowHeight > elementOffset) {
scrollEffectElement.style.opacity = 1;
scrollEffectElement.style.transform = "translateY(0)";
}
}
window.addEventListener("scroll", checkScroll);
4. 스크롤 이벤트 구현하기
위의 코드를 작성하면 페이지가 스크롤될 때 scrollEffect 요소가 나타나고 사라집니다. window.addEventListener("scroll", checkScroll); 코드는 스크롤 이벤트를 감지하고 checkScroll 함수를 호출하여 요소의 나타나기/사라지기 효과를 관리합니다.
5. 결과
스크롤 올리면 글자가 사라집니다.
'HTML 예제' 카테고리의 다른 글
| 무한 스크롤: 스크롤할 때마다 새로운 내용을 불러와 보여주는 기능 (0) | 2023.12.05 |
|---|---|
| 모달 팝업: 모달 창을 HTML과 CSS로 만들어 팝업 레이어 생성 (0) | 2023.12.05 |
| 회전하는 로고: CSS로 로고 이미지 회전 애니메이션 (0) | 2023.12.05 |
| 레인보우 텍스트: CSS 그래디언트를 사용하여 텍스트에 레인보우 색상 적용 (0) | 2023.12.05 |
| 반짝이는 배경: CSS 애니메이션으로 배경 색상을 반짝이게 만들기 (0) | 2023.12.05 |
