[CSS] 텍스트 호버(hover) 애니메이션

위와 같이 마우스를 갖다 대면 한 글자씩 위쪽으로 파도타기하면서 없어지고 밑에서 한 글자씩 다시 올라오는 애니메이션을 구현했다.

 

HTML

  <div class="box">

    <div class="text">

      <span>안</span>

      <span>녕</span>

      <span>하</span>

      <span>세</span>

      <span>요?</span>

      <span>반</span>

      <span>갑</span>

      <span>습</span>

      <span>니</span>

      <span>다.</span>

    </div>

    <div class="hover-text">

      <span>안</span>

      <span>녕</span>

      <span>하</span>

      <span>세</span>

      <span>요?</span>

      <span>반</span>

      <span>갑</span>

      <span>습</span>

      <span>니</span>

      <span>다.</span>

    </div>

  </div>

텍스트 박스를 2개 만들어주고 각 글자들을 span태그에 따로따로 담았다.

 

CSS

.box {

  margin-top: 200px;

  margin-left: 200px;

  overflow: hidden;

  cursor: pointer;

  position: relative;

}

.text span,

.hover-text span{

  display: inline-block;

  transition: all 0.3s;

  font-size: 60px;

}

.hover-text{

  position: absolute;

  top: 0;

  left: 0;

}

.hover-text span{

  transform: translateY(100%);

}

.text-span0{

  transform: translateY(-100%);

}

.text-span1{

  transform: translateY(-100%);

  transition-delay: 0.05s !important;

}

.text-span2{

  transform: translateY(-100%);

  transition-delay: 0.1s !important;

}

.text-span3{

  transform: translateY(-100%);

  transition-delay: 0.15s !important;

}

.text-span4{

  transform: translateY(-100%);

  transition-delay: 0.2s !important;

}

.text-span5{

  transform: translateY(-100%);

  transition-delay: 0.25s !important;

}

.text-span6{

  transform: translateY(-100%);

  transition-delay: 0.3s !important;

}

.text-span7{

  transform: translateY(-100%);

  transition-delay: 0.35s !important;

}

.text-span8{

  transform: translateY(-100%);

  transition-delay: 0.4s !important;

}

.text-span9{

  transform: translateY(-100%);

  transition-delay: 0.45s !important;

}

.hover-text-span0{

  transform: translateY(0) !important;

}

.hover-text-span1{

  transform: translateY(0) !important;

  transition-delay: 0.05s !important;

}

.hover-text-span2{

  transform: translateY(0) !important;

  transition-delay: 0.1s !important;

}

.hover-text-span3{

  transform: translateY(0) !important;

  transition-delay: 0.15s !important;

}

.hover-text-span4{

  transform: translateY(0) !important;

  transition-delay: 0.2s !important;

}

.hover-text-span5{

  transform: translateY(0) !important;

  transition-delay: 0.25s !important;

}

.hover-text-span6{

  transform: translateY(0) !important;

  transition-delay: 0.3s !important;

}

.hover-text-span7{

  transform: translateY(0) !important;

  transition-delay: 0.35s !important;

}

.hover-text-span8{

  transform: translateY(0) !important;

  transition-delay: 0.4s !important;

}

.hover-text-span9{

  transform: translateY(0) !important;

  transition-delay: 0.45s !important;

}

박스에 overflow:hidden과 position:relative를 걸어주고 hover-text에 position:absolute를 걸어서 띄어준다음 밑으로 내려서 안보이게 한다. 그리고 hover하면 transform: translateY로 조절하면서 transition-delay로 속도를 조절해준다.

 

JAVASCRIPT

const box = document.querySelector('.box');

box.addEventListener('mouseover',function(){

  for(let i = 0; i < document.querySelectorAll('.text span').length; i++){

    document.querySelectorAll('.text span')[i].classList.add(`text-span${i}`);

    document.querySelectorAll('.hover-text span')[i].classList.add(`hover-text-span${i}`);

  }

})

box.addEventListener('mouseout',function(){

  for(let i = 0; i < document.querySelectorAll('.text span').length; i++){

    document.querySelectorAll('.text span')[i].classList.remove(`text-span${i}`);

    document.querySelectorAll('.hover-text span')[i].classList.remove(`hover-text-span${i}`);

  }

})

자바스크립트로 마우스가 올라갔을때, 나갔을 때를 따로 짜서 반복문으로 class를 부여하는 식으로 만들었다.

 

자바스크립트를 사용하지 않고 그냥 hover로 하면 되는데 왜 자바스크립트를 사용했냐면...

원래 구현하려던 바는 마우스가 들어가고 나올 때 전부 다 파도타기하는 애니메이션을 만들려 했는데, css로 그냥 hover사실 마우스가 out되었을 때 다시 파도타기하면서 내려오길 바라면서 짰는데 안되길래 혹시나 자바스크립트로 짜면 되려나 싶어서 해봤지만 안됐다. 그렇게 하려면 mouseout에 또 다른 코드를 짜야될거같다는 생각이 들었지만 그렇게 되면 저 하나의 hover 애니메이션을 위해 너무 많은 코드를 낭비하는 것이 아닌가하는 생각이 들었다. 그리고 다르게 생각해서 짜면 더 간단하고 쉽게 짤 수 있는 방법이 있지 않을까하는 생각도 들었다. 다음에 좀 더 업그레이드해서 시도해봐야겠다.