본문 바로가기
UX 개발/UX - 스크롤 애니메이션

스크롤 애니메이션 연습 - HTML 요소에 스크롤 애니메이션 주기

siimplelab 2024. 6. 25. 16:33
반응형

 

스크롤 시 리스트 항목 강조

웹 경험을 더욱 매력적이고 상호작용적으로 만드는 데에는 애니메이션과 동적 요소를 사용하는 것이 중요합니다. 그 중 하나는 스크롤 이벤트를 사용하는 것으로, 사용자가 페이지를 스크롤할 때 애니메이션이나 변화를 트리거할 수 있습니다. 이 튜토리얼에서는 스크롤 위치에 따라 리스트 항목을 강조하는 예제를 통해 스크롤 이벤트를 활용하는 방법을 알아보겠습니다.

아래는 동물 이름을 강조하는 스크롤 트리거 애니메이션을 만드는 전체 HTML, CSS 및 JavaScript 코드입니다.

HTML 구조

HTML 구조는 동물 이름의 간단한 리스트로 구성됩니다. 리스트는 <ul> 요소로 감싸져 있으며, 각 항목은 <li> 요소에 포함되어 있습니다. 소개 텍스트를 위한 div도 있습니다.

<!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>Scroll Events for Animals</title>
</head>

<body>
  <div id="intro-main">
    <p>요소 기반 스크롤 이벤트 트리거 테스트</p>
  </div>
  <ul id="list-item-wrapper">
    <li class="list-item">Dog</li>
    <li class="list-item">Cat</li>
    <li class="list-item">Elephant</li>
    <li class="list-item">Giraffe</li>
    <li class="list-item">Lion</li>
    <li class="list-item">Tiger</li>
    <li class="list-item">Zebra</li>
    <li class="list-item">Kangaroo</li>
    <li class="list-item">Dog</li>
    <li class="list-item">Cat</li>
    <li class="list-item">Elephant</li>
    <li class="list-item">Giraffe</li>
    <li class="list-item">Lion</li>
    <li class="list-item">Tiger</li>
    <li class="list-item">Zebra</li>
    <li class="list-item">Kangaroo</li>
    <li class="list-item">Dog</li>
    <li class="list-item">Cat</li>
    <li class="list-item">Elephant</li>
    <li class="list-item">Giraffe</li>
    <li class="list-item">Lion</li>
    <li class="list-item">Tiger</li>
    <li class="list-item">Zebra</li>
    <li class="list-item">Kangaroo</li>
    <li class="list-item">Dog</li>
    <li class="list-item">Cat</li>
    <li class="list-item">Elephant</li>
    <li class="list-item">Giraffe</li>
    <li class="list-item">Lion</li>
    <li class="list-item">Tiger</li>
    <li class="list-item">Zebra</li>
    <li class="list-item">Kangaroo</li>
  </ul>
  <script src="./script.js"></script>
</body>

</html>

CSS 스타일링

CSS는 리스트 항목의 기본 스타일과 리스트 항목이 강조될 때의 애니메이션 효과를 정의합니다.

/* Reset CSS */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
section {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

body {
  background-color: #111111;
}

#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;
}

#intro-main p {
  text-align: center;
}

@keyframes upAndDown {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

#list-item-wrapper {
  margin: 0 auto 0;
  width: 383px;
}

.list-item {
  font-size: 48px;
  font-weight: 600;
  word-break: keep-all;
  white-space: nowrap;
}

.list-item#on {
  color: white;
}

#intro-main {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0;
  height: 100vh;
}

.list-item-wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0;
  padding: 0;
}

스크롤 이벤트 처리용 JavaScript

JavaScript 코드는 스크롤 이벤트를 감지하여 현재 스크롤 위치에 해당하는 리스트 항목을 강조합니다.

document.addEventListener("DOMContentLoaded", () => {
  const documentHeight = document.body.scrollHeight;
  const introMain = document.getElementById("intro-main");
  const introMainHeight = introMain.offsetHeight;
  const listWrapper = document.getElementById("list-item-wrapper");
  const listWrapperHeight = listWrapper.clientHeight;
  const listItems = document.querySelectorAll('.list-item');

  const listStyleChangeStartY = introMainHeight;
  const listStyleChangeEndY = documentHeight;
  const realStartPointY = listStyleChangeStartY / 2;
  const division = ((listStyleChangeEndY - listStyleChangeStartY) / listItems.length);

  listWrapper.style.marginBottom = `${listWrapperHeight / 2}px`;

  window.addEventListener("scroll", () => {
    if (document.getElementById("on")) {
      document.getElementById("on").removeAttribute("id");
    }

    if (window.scrollY > realStartPointY && window.scrollY < listStyleChangeEndY) {
      const scrollPosition = window.scrollY - realStartPointY;
      const targetIndex = Math.floor(scrollPosition / division);

      if (targetIndex >= 0 && targetIndex < listItems.length) {
        listItems[targetIndex].id = "on";
      }
    }
  });
});

JavaScript 코드 설명

  1. 변수 초기화:
    • documentHeight: 문서의 전체 높이.
    • introMain: 소개 섹션 요소.
    • introMainHeight: 소개 섹션의 높이.
    • listWrapper: 리스트 항목의 래퍼 요소.
    • listWrapperHeight: 리스트 래퍼의 높이.
    • listItems: 강조해야 할 모든 리스트 항목.
  2. 스크롤 이벤트 시작 및 종료 지점:
    • listStyleChangeStartY: 스크롤 이벤트의 시작 지점 (소개 섹션의 높이).
    • listStyleChangeEndY: 스크롤 이벤트의 종료 지점 (문서 전체 높이).
    • realStartPointY: 스크롤 이벤트의 실제 시작 지점으로, 소개 섹션 높이의 절반으로 설정됨.
  3. 섹션 높이 계산:
    • division: 스크롤 영역 내 각 섹션의 높이, 리스트 항목 수와 시작 및 종료 지점 간의 높이 차이를 기반으로 계산됨.
  4. 스크롤 가능 영역 확장:
    • 리스트 래퍼의 하단 여백을 그 높이의 절반으로 설정하여 충분한 스크롤 가능 영역을 확보함.
  5. 스크롤 이벤트 리스너:
    • 스크롤 이벤트를 감지하고 이전에 강조된 항목에서 id 속성을 제거합니다.
    • 현재 스크롤 위치를 계산하고 스크롤 위치에 해당하는 리스트 항목을 강조합니다.
    • 강조된 리스트 항목에 id="on" 속성을 추가하여 스타일을 변경합니다.

결론

이 예제는 스크롤 위치에 따라 리스트 항목을 강조하는 인터랙티브 스크롤 이벤트 애니메이션을 만드는 방법을 보여줍니다. 이 튜토리얼을 따라가면서 JavaScript를 사용하여 DOM을 조작하고 사용자 경험을 향상시키는 방법을 배울 수 있습니다.

반응형

'UX 개발 > UX - 스크롤 애니메이션' 카테고리의 다른 글

스크롤 이벤트에 따른 동영상 재생 애니메이션 만들기  (0) 2024.07.03
스크롤 애니메이션 활용 CSS 트랜스폼 효과 주기  (0) 2024.07.03
자바스크립트로 스무스 스크롤(Smooth Scroll) 구현하기  (0) 2024.06.24
초간단한 스크롤 패럴랙스 애니메이션 구현하기 (CSS, JS)  (0) 2024.06.23
CSS만으로 초간단한 패럴랙스 효과 만들기  (0) 2024.06.23

'UX 개발/UX - 스크롤 애니메이션' Related Articles

❤️ 외주/과외 문의
🖥️ 클라우드 메뉴판 : 디지털팝

티스토리툴바