TIL 23.07.11 text hover effect

Text hover effect 

 

기능 구현 전, 우선 다음 패키지를 설치한다.

 

yarn add framer-motion

 

커서를 갖다대면 글자가 움직이는 효과로 그동안 너무 구현해보고 싶었던 기능중 하나였다. 

일단 구현하고자하는 문장을 배열형태로 나타내준다. 총 3줄을 구현하기 위해서 다음과 같이 나누었다.

 

  const sentences = ["MAKE", "YOUR OWN", "COCKTAILS"];

 

sentences 각 하나의 알파벳들이 움직여야 하므로, split 으로 쪼갠 뒤에 맵을 돌려준다. <span> 이므로 서로 양옆으로 붙어있게 됨.

여백을 유지하기 위해 letter 가 여백일 경우, \u00A0, 아닌경우 그냥 letter 로 나타나도록 함.

 

  {sentences.map((sentence, i) => (
        <span key={i}>
          {sentence.split("").map((letter, i) => (
            <TextSpan key={i}>{letter === " " ? "\u00A0" : letter}</TextSpan>
          ))}
          <br />
        </span>
      ))}

 

마우스를 hover 하면 다음과 같이 움직이게 설정했고, isPlay state로, 한번만 움직이게 설정하였다. 또한 hover 기능을 이용해 커서를 갖다대면, 하얀색 > 노란색으로 보이게끔 함.

 

const rubberBand = () => {
    controls.start({
      transform: [
        "scale3d(1, 1, 1)",
        "scale3d(1.4, 0.55, 1)",
        "scale3d(0.75, 1.25, 1)",
        "scale3d(1.25, 0.85, 1)",
        "scale3d(0.9, 1.05, 1)",
        "scale3d(1, 1, 1)",
      ],
    });
    setIsPlaying(true);
  };

 

결과물