반응형
웹페이지의 요소들을 애니메이션으로 만들면 상호작용성과 시각적 매력을 더해 사용자 경험을 크게 향상시킬 수 있습니다. 이번 포스트에서는 간단하지만 효과적인 CSS 애니메이션을 만들고 이를 HTML 요소에 적용하는 방법을 살펴보겠습니다. 제공된 예제 코드를 통해 이 과정을 안내하겠습니다.
HTML 및 CSS 설정하기
먼저 기본 HTML 구조를 설정하고 CSS 파일을 링크합니다. 아래는 HTML 코드입니다:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./index.css">
<title>HTML 요소의 스크롤 애니메이션</title>
</head>
<body>
<div style="width: 100%; height: 2000px;">
<div class="instruction">
아래로 스크롤 해주세요
</div>
</div>
<main>
<section id="panel1-img">
<div class="shape-circle"></div>
</section>
</main>
</body>
<script>
document.addEventListener('DOMContentLoaded', () => {
const shapeCircle = document.querySelector('.shape-circle');
const panel1Img = document.querySelector('#panel1-img');
window.addEventListener('scroll', () => {
const scrollValue = window.scrollY;
const panel1ImgTop = panel1Img.offsetTop;
const panel1ImgHeight = panel1Img.clientHeight;
if (scrollValue > panel1ImgTop - panel1ImgHeight) {
shapeCircle.style.transform= `rotate(${scrollValue - panel1ImgTop}deg)`;
}
});
})
</script>
</html>이 구조에서 우리는 스크롤 시 애니메이션이 적용될 원형 모양의 요소를 포함하는 메인 섹션을 가지고 있습니다. 이제 요소들을 스타일링하고 애니메이션을 정의하기 위해 CSS를 작성해보겠습니다.
CSS로 스타일링 및 애니메이션 적용하기
CSS 파일에는 본문, 메인 이미지 래퍼, 소개 텍스트, 그리고 애니메이션할 원형 요소에 대한 스타일이 포함됩니다. 아래는 CSS 코드입니다:
body {
background-color: #111111;
}
#main-img-wrapper {
padding-top: 139px;
text-align: center;
}
#intro-main {
display: flex;
flex-direction: column;
margin: 54px auto 140px;
width: 300px;
align-items: center;
color: white;
font-size: 40px;
font-weight: 500;
gap: 20px;
}
#join-us-text {
margin-top: 73px;
font-size: 16px;
font-weight: 400;
opacity: .6;
}
#intro-main p {
text-align: center;
}
@keyframes upAndDown {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
#down-arrow-icon {
width: 33px;
animation: upAndDown 1s infinite;
}
#list-item-wrapper {
margin: 0 auto 500px;
width: 383px;
}
.list-item {
display: inline;
font-size: 48px;
font-weight: 600;
}
.list-item::before {
display: inline-block;
background-image: url('./icons/dark_house.png');
background-size: 51px 53px;
content: "";
width: 51px;
height: 53px;
}
.list-item#on {
color: white;
}
.list-item#on::before {
background-image: url('./icons/light_house.png');
}
#panel1-img {
margin-bottom: 500px;
position: relative;
height: 400px;
}
.instruction {
color: white;
display: flex;
justify-content: center;
padding: 2rem;
font-weight: bold;
font-size: 2rem;
}
.shape-circle {
width: 400px;
height: 400px;
background-image: linear-gradient(90deg, #FFD700, #FF8C00);
border-radius: 50%;
position: absolute;
right: -200px;
transform-origin: top;
}CSS의 주요 포인트
- 본문 배경: 다른 요소들과 강렬한 대비를 주기 위해 어두운 색상으로 설정.
- 소개 텍스트 및 레이아웃: 적절한 여백, 글자 크기 및 색상을 사용하여 중앙에 배치.
- 애니메이션 키프레임:
@keyframes규칙을 사용하여 상하 움직임을 정의. - 원형 요소: 스크롤 시 애니메이션 될 그라디언트 원형으로 스타일링.
JavaScript로 스크롤 애니메이션 추가하기
원형 요소가 스크롤 시 움직이고 회전하게 만들기 위해 간단한 JavaScript 함수를 사용합니다. 아래는 JavaScript 코드입니다:
document.addEventListener('DOMContentLoaded', () => {
const shapeCircle = document.querySelector('.shape-circle');
const panel1Img = document.querySelector('#panel1-img');
window.addEventListener('scroll', () => {
const scrollValue = window.scrollY;
const panel1ImgTop = panel1Img.offsetTop;
const panel1ImgHeight = panel1Img.clientHeight;
if (scrollValue > panel1ImgTop - panel1ImgHeight) {
shapeCircle.style.transform= `translateY(${scrollValue - panel1ImgTop + panel1ImgHeight}px) rotate(${scrollValue - panel1ImgTop}deg)`;
}
});
})JavaScript 설명
- 이벤트 리스너:
DOMContentLoaded이벤트를 감지하여 DOM이 완전히 로드된 후 스크립트를 실행. - 스크롤 이벤트: 스크롤 이벤트를 감지하여 창 객체에 이벤트 리스너 추가.
- 변환 로직: 스크롤 위치를 계산하고 원형 요소의
transform속성을 조정하여 움직이고 회전하도록 설정.
결론
CSS 애니메이션과 JavaScript를 결합하여 웹페이지의 요소를 매력적이고 상호작용적으로 만들 수 있습니다. 이번 튜토리얼에서는 스크롤 시 원형 모양을 애니메이션하는 간단한 예제를 보여드렸습니다. 다양한 애니메이션과 스타일을 실험하여 웹페이지를 더욱 동적이고 시각적으로 매력적으로 만들어 보세요.
코딩을 즐기세요!
반응형
'UX 개발 > UX - 스크롤 애니메이션' 카테고리의 다른 글
| IntersectionObserver를 사용한 스크롤 인터랙션 및 이미지 표시 (0) | 2024.07.17 |
|---|---|
| 스크롤 이벤트에 따른 동영상 재생 애니메이션 만들기 (0) | 2024.07.03 |
| 스크롤 애니메이션 연습 - HTML 요소에 스크롤 애니메이션 주기 (0) | 2024.06.25 |
| 자바스크립트로 스무스 스크롤(Smooth Scroll) 구현하기 (0) | 2024.06.24 |
| 초간단한 스크롤 패럴랙스 애니메이션 구현하기 (CSS, JS) (0) | 2024.06.23 |
