스크롤에 따라 기울어지며 나타나는 이미지

scroll
rotate

2023-05-02 08:40

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

목록 보기

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

<!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>
  <main>
    <section id="panel1-img">
      <img id="flying-santa-image" src="./santa_flying.png" alt="santa flying">
    </section>
  </main>
</body>

html

const panel1Img = document.getElementById('panel1-img')
  const flyingSantaImage = document.getElementById('flying-santa-image')

  window.addEventListener("scroll", () => {
    const scrollYBottom = window.scrollY + document.documentElement.clientHeight

    if (scrollYBottom > panel1Img.offsetTop && scrollYBottom < panel1Img.offsetTop + panel1Img.offsetHeight + 100) {
      console.log('over')
      const translateX = 80 - 80 * 1.3 * (scrollYBottom - panel1Img.offsetTop) / (panel1Img.offsetHeight + 100)
      const translateY = -13 + 13 * (scrollYBottom - panel1Img.offsetTop) / (panel1Img.offsetHeight + 100)

      const rotationDegree = 23 - 23 * 1.7 * (scrollYBottom - panel1Img.offsetTop) / (panel1Img.offsetHeight + 100)

      flyingSantaImage.style.transform = `translate(${translateX}px, ${translateY}px) rotate(${rotationDegree}deg)`
    }
  })

javascript