스마트폰으로 화면을 내릴때 글자가 밑에서부터 부드럽게 생기는 효과를 본적 있으신가요? 이런 애니메이션 효과가 바로 스크롤애니메이션 입니다. 저번 포스팅에서는 모바일 환경을 위한 햄버거 메뉴 만들기 를 진행했습니다. 이번 포스팅에서는 모바일 환경에서 스크롤 애니메이션 페이지를 만드는 과정을 초보자도 이해하기 쉽도록 단계별로 설명하겠습니다. 이 예제에서는 스크롤에 따라 요소가 나타나는 간단한 애니메이션을 구현할 것입니다. HTML, CSS, 및 JavaScript를 사용하여 구현합니다.
[개발 같이해요/HTML&CSS] - [ CSS ] 모바일 환경을 위한 CSS 햄버거 메뉴 만들기
[ CSS ] 모바일 환경을 위한 CSS 햄버거 메뉴 만들기
햄버거 메뉴는 모바일 환경에서 주로 사용되는 네비게이션 메뉴입니다. 이 글에서는 간단한 CSS만을 사용하여 햄버거 메뉴를 만드는 방법을 알아보겠습니다. HTML 코드 작성 햄버거 메뉴와 네비
it-ability.tistory.com
완성된 스크롤 애니메이션 효과
이번 예제를 통해 완성 될 스크롤 애니메이션 효과입니다.
소스코드 구조 설명
SCROLLANIMATION 폴더 구조 입니다.
├── index.html
├── css/
│ └── style.css
└── js/
└── script.js
index.html 작성하기
index.html 에서 기본적인 화면 레이아웃 및 화면구조를 작성하도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>모바일용 스크롤 애니메이션</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<section class="scroll-section" id="section1">섹션 1</section>
<section class="scroll-section" id="section2">섹션 2</section>
<section class="scroll-section" id="section3">섹션 3</section>
<script src="./js/script.js"></script>
</body>
</html>
이번 예제 에서는 간단하게 <body> 안에 <section> 태그로 구분을 지었습니다.
CSS / style.css 작성하기
다음은 CSS 파일 내용 입니다.
body, html {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.scroll-section {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
opacity: 0;
transform: translateY(20%); /* 초기 상태에서 아래로 조금 이동 */
transition: opacity 1.5s ease-out, transform 1.5s ease-out; /* 부드러운 페이드 인 및 위로 이동 효과 */
}
.scroll-section.visible {
opacity: 1;
transform: translateY(0); /* 최종 상태에서 원래 위치로 */
}
아래로 스크롤 하면 밑에서 올라오는 section 이 페이드인 되면서 위로 이동되는 효과를 넣었고,
스크롤이 다 되면 원래위치로 이동되도록 하였습니다.
js / script.js 작성하기
자바스크립트 파일입니다.
document.addEventListener("DOMContentLoaded", function() {
const sections = document.querySelectorAll('.scroll-section');
let rafScheduled = false;
function revealSections() {
rafScheduled = false;
for (const section of sections) {
const sectionTop = section.getBoundingClientRect().top;
const sectionHeight = section.getBoundingClientRect().height;
if (sectionTop <= (window.innerHeight || document.documentElement.clientHeight) * 0.7){
section.classList.add('visible');
} else {
section.classList.remove('visible');
}
}
}
function requestAnimation() {
if (rafScheduled) return;
rafScheduled = true;
requestAnimationFrame(revealSections);
}
window.addEventListener('scroll', requestAnimation);
revealSections();
});
다음은 코드 설명입니다.
document.addEventListener("DOMContentLoaded", function() {
} # DOMContentLoaded 이벤트 리스너
이 스크립트는 웹 페이지의 DOM 구조가 완전히 로드되고 준비된 후에 실행됩니다. DOMContentLoaded 이벤트가 발생하면, 주어진 함수가 호출됩니다.
const sections = document.querySelectorAll('.scroll-section');
.scroll-section 클래스를 가진 모든 요소를 선택하여 sections 변수에 저장합니다. 이러한 요소들이 스크롤에 의해 가시적으로 변경될 대상입니다.
let rafScheduled = false;
rafScheduled는 requestAnimationFrame 호출을 관리하기 위한 플래그 변수입니다. 이는 불필요한 애니메이션 프레임 요청을 방지하는 데 사용됩니다.
function revealSections() {
rafScheduled = false;
for (const section of sections) {
const sectionTop = section.getBoundingClientRect().top;
const sectionHeight = section.getBoundingClientRect().height;
if (sectionTop <= (window.innerHeight || document.documentElement.clientHeight) * 0.7) {
section.classList.add('visible');
} else {
section.classList.remove('visible');
}
}
}
이 함수는 각 섹션의 위치를 확인하고, 사용자의 뷰포트 내에 위치할 경우 해당 섹션에 'visible' 클래스를 추가합니다. 만약 섹션이 뷰포트 바깥에 위치한다면, 'visible' 클래스를 제거합니다.
섹션의 상단 위치(sectionTop)와 높이(sectionHeight)는 getBoundingClientRect 메서드를 사용하여 계산됩니다.
window.innerHeight 또는 document.documentElement.clientHeight는 브라우저 뷰포트의 높이입니다. 섹션의 상단이 뷰포트 높이의 70% 이내에 위치할 경우, 해당 섹션은 가시적으로 표시됩니다.
function requestAnimation() {
if (rafScheduled) return;
rafScheduled = true;
requestAnimationFrame(revealSections);
}
스크롤 이벤트에 반응하여 revealSections 함수를 비동기적으로 호출하기 위해 requestAnimationFrame을 사용합니다.
rafScheduled 플래그를 사용하여 이미 요청된 애니메이션 프레임이 있는 경우 중복 요청을 방지합니다.
window.addEventListener('scroll', requestAnimation);
revealSections();
사용자가 스크롤할 때마다 requestAnimation 함수를 호출합니다. 이는 섹션의 가시성을 다시 계산하고 필요에 따라 업데이트합니다.
마무리
이번 포스팅에서는 모바일 환경을 위한 스크롤애니메이션 만들기 예제를 만들어 보았습니다. 요즘 왠만한 홈페이지 에는 스크롤 애니메이션이 적용되어있습니다. 모바일 환경을 위한 스크롤애니메이션 예제를 작성했지만, 제가 제공해드린 예제 소스를 응용하시면 반응형 스크롤 애니메이션을 적용시킬 수 있습니다.
다음 포스팅에서도 모바일 환경을 위한 다양한 효과를 만드는 작업을 해보도록 하겠습니다.