[html/css] 마우스 휠 스크롤 애니메이션 만들기

웹 사이트, 홈페이지들을 서핑 하다보면 

메인 페이지에 마우스 모양에 휠이 내려가고 무한 반복이 되는 그림을 꽤 본 적이 있다. 
지금까지는 그저 저런 효과도 있구나 하고 넘겼는데,

웹 사이트 제작 사이드 프로젝트를 시작하고서 어느 순간 보니 문득 구현 방법이 궁금해졌다.
수많은 자료를 조사했고 html과 css만으로 가장 간단하게 만들 수 있었던 소스를 기록한다.

 

그대로 복붙해서 가져다쓰면 색상이나 위치, 크기가 어색할 수 있으니

어려운 소스도 아니고 공부도 할 겸 하나씩 커스터마이징 해보면 좋을 듯 하다.

---

 

---

html

<a href="#" class="scroll-down">           <!-- 마우스 휠 효과를 줄 태그 -->
    <div class="scroll">                   <!-- 마우스 모양 도형 -->
        <span class="scroll-dot"></span>   <!-- 마우스 휠 움직임 효과를 줄 구체 -->
    </div>
    <div class="arrow-down"></div>         <!-- 마우스 이미지 아래쪽의 화살표 -->
</a>

 

css

/* position, bottom, left 등으로 위치 설정 필요 */
.scroll-down {
  position: absolute;
  bottom: 5.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 마우스 모양 만들기 */
.scroll {
  width: 2rem;
  height: 4rem;
  border: 2px solid black;
  border-radius: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 마우스 휠 움직임 */
.scroll span {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: white;
  display: block;
  animation: cursor 1.15s linear infinite;
}

/* 마우스 아래 화살표 */
.arrow-down {
  width: 0.8rem;
  height: 0.8rem;
  border: 2px solid transparent;
  border-right-color: black;
  border-bottom-color: black;
  transform: rotate(45deg);
  margin-top: 0.3rem;
  animation: arrow 1.15s linear infinite;
}

@keyframes cursor {
  0% {
    opacity: 0;
    transform: translateY(-1rem);
  }
  
  100% {
    opacity: 1;
    transform: translateY(1rem);
  }
}

@keyframes arrow {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  
  100% {
    opacity: 1;
  }
}

 

참고자료: https://youtu.be/qE1fnePaXdM