스크롤에 따라 색이 바뀌는 텍스트

scroll

2023-05-02 04:33

🗂️ 21개 프로젝트로 완성하는 인터랙티브 웹 개발 with Three.js & Canvas

목록 보기

스크롤에 따라 색이 바뀌는 텍스트 스크롤에 따라 기울어지며 나타나는 이미지 스크롤 시 특정 위치에서 postion fixed가 되는 영역 Customized cursor 일정 시간 이상 눌러야 동작하는 버튼 마우스 커서에 따라 입체적으로 움직이는 요소 스크롤을 내렸을 때 나타나는 이미지 Canvas particle 다루기

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>Fast Bank</title>
</head>

<body>
  <div id="main-img-wrapper">
    <img width="320" src="./Lovepik_com-401339128-data-management-data-analysis-icon-free-vector-illustration-mate.png"
      alt="coding image">
  </div>
  <div id="intro-main">
    <p>이미 모두의 은행, 패스트뱅크</p>
    <p>함께 일해요.</p>
    <p id="join-us-text">Join us!</p>
    <img id="down-arrow-icon" src="./down-arrow.png" alt="down arrow icon">
  </div>
  <ul id="list-item-wrapper">
    <li class="list-item">26주적금</li>
    <li class="list-item">저금</li>
    <li class="list-item">패스트캠퍼스</li>
    <li class="list-item">떡볶이</li>
    <li class="list-item">치킨</li>
    <li class="list-item">축구</li>
    <li class="list-item">축구선수</li>
    <li class="list-item">마이너스통장대출</li>
    <li class="list-item">26주적금</li>
    <li class="list-item">저금</li>
    <li class="list-item">패스트캠퍼스</li>
    <li class="list-item">떡볶이</li>
    <li class="list-item">치킨</li>
    <li class="list-item">축구</li>
    <li class="list-item">축구선수</li>
    <li class="list-item">마이너스통장대출</li>
    <li class="list-item">26주적금</li>
    <li class="list-item">저금</li>
    <li class="list-item">패스트캠퍼스</li>
    <li class="list-item">떡볶이</li>
    <li class="list-item">치킨</li>
    <li class="list-item">축구</li>
    <li class="list-item">축구선수</li>
    <li class="list-item">마이너스통장대출</li>
    <li class="list-item">26주적금</li>
    <li class="list-item">저금</li>
    <li class="list-item">패스트캠퍼스</li>
    <li class="list-item">떡볶이</li>
    <li class="list-item">치킨</li>
    <li class="list-item">축구</li>
    <li class="list-item">축구선수</li>
    <li class="list-item">마이너스통장대출</li>
  </ul>
</body>

html

스크롤을 내릴 때 아래 이미지처럼 텍스트의 색상을 변경할 것이다.

먼저, 콘솔에 scrollY 값을 출력해서 리스트의 첫번째 아이템에 스크롤 값과 마지막 아이템의 스크롤 값을 변수에 저장한다.

const startY = 373
const endY = 1585

javascript

그리고 querySelectorAll로 리스트 아이템을 가져온다.

const listItems = document.querySelectorAll('.list-item')

javascript

endY 값에서 startY 값을 뺀 후에 리스트의 갯수로 나눠서 division 변수에 저장한다.

이 division은 아이템 간의 간격이 된다.

전체 스크롤 값에서 startY 를 뺀 후에 division으로 나누면 targetIndex 값을 구할 수 있다.

아래는 전체 코드이다.

const listStyleChangeStartY = 373
  const listStyleChangeEndY = 1585

  const listItems = document.querySelectorAll('.list-item')

  const division = (listStyleChangeEndY - listStyleChangeStartY) / listItems.length

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

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

      listItems[targetIndex].id = "on"
    }
  })

javascript