마우스 커서에 따라 입체적으로 움직이는 요소

2023-05-10 07:45

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

목록 보기

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

결과물

html

<section class="header hidden-area">
    <span class="circle" id="circle-1"></span>
    <span class="circle" id="circle-2"></span>
    <img id="cube__image_1"
      src="https://github.com/Han-Kyeol/interactive-web-lecture/blob/main/interactive_web_code/Chapter%205/images/Lovepik_com-401467010-cube.png?raw=true"
      alt="cube image" class="cube__image">
    <img id="cube__image_2"
      src="https://github.com/Han-Kyeol/interactive-web-lecture/blob/main/interactive_web_code/Chapter%205/images/Lovepik_com-401467010-cube.png?raw=true"
      alt="cube image" class="cube__image">
    <img id="cube__image_3"
      src="https://github.com/Han-Kyeol/interactive-web-lecture/blob/main/interactive_web_code/Chapter%205/images/Lovepik_com-401467010-cube.png?raw=true"
      alt="cube image" class="cube__image">
    <img id="cube__image_4"
      src="https://github.com/Han-Kyeol/interactive-web-lecture/blob/main/interactive_web_code/Chapter%205/images/Lovepik_com-401467010-cube.png?raw=true"
      alt="cube image" class="cube__image">
    <h1 class="header__title">
      <div>LAST ART</div>
      <div>PROJECTS</div>
    </h1>
  </section>

html

css

.header {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow-x: hidden;
}

.circle {
  position: absolute;
  display: inline-block;
  width: 350px;
  height: 350px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 50%;
}

#circle-1 {
  top: -100px;
  left: -130px;
}

#circle-2 {
  bottom: 5vh;
  right: -230px;
}

.cube__image {
  position: absolute;
  opacity: 0.45;
}

#cube__image_1 {
  top: 15%;
  left: 15%;
  width: 15%;
}

#cube__image_2 {
  top: 55%;
  left: 15%;
  width: 20%;
}

#cube__image_3 {
  top: 20%;
  left: 70%;
  width: 13%;
}

#cube__image_4 {
  top: 60%;
  left: 70%;
  width: 20%;
}

.header__title {
  position: absolute;
  top: 30vh;
  width: 100%;
  font-size: 7.5rem;
  font-weight: 400;
  line-height: 8.625rem;
  color: rgb(213, 165, 78);
  text-align: center;
}

css

javascript

const header = document.querySelector(".header")

header.addEventListener("mousemove", (e) => {
    const xRelativeToHeader = e.clientX / header.clientWidth
    const yRelativeToHeader = e.clientY / header.clientHeight

    document.querySelector(".header__title").style.transform = `translate(${(xRelativeToHeader * -50)}px, ${yRelativeToHeader * -50}px)`

    document.querySelector("#circle-1").style.transform = `translate(${xRelativeToHeader * -25}px, ${yRelativeToHeader * -25}px)`
    document.querySelector("#circle-2").style.transform = `translate(${xRelativeToHeader * 25}px, ${yRelativeToHeader * 25}px)`

    document.querySelector("#cube__image_1").style.transform = `translate(${xRelativeToHeader * -15}px, ${yRelativeToHeader * -15}px)`
    document.querySelector("#cube__image_2").style.transform = `translate(${xRelativeToHeader * -8}px, ${yRelativeToHeader * -8}px)`
    document.querySelector("#cube__image_3").style.transform = `translate(${xRelativeToHeader * -20}px, ${yRelativeToHeader * -20}px)`
    document.querySelector("#cube__image_4").style.transform = `translate(${xRelativeToHeader * 5}px, ${yRelativeToHeader * 5}px)`
  })

javascript