gif hover 재생 이벤트 만들기

1. gif에 재생 이벤트를...?

얼마전? 아니 얼마전도 아니고 바로 어제, gif 재생 이벤트가 필요했다.
하지만 gif가 계속 재생되는 게 아니라, 마우스가 hover했을 때만 재생되어야 했다!
물론 mp4를 넣어서 hover할 때 재생시간을 조절하면 되지만, gif가 더 가벼우니까 🙂
아니 그런데 gif에서 재생(?)이라는 개념이 있나..? 엥!?!??? 🤔🤔🤔

아무튼, gif의 재생시간을 조절할 수는 없지만 여러가지 꼼수(?)는 있다고 한다.

검색을 해보니, 공통적으로 정적 이미지와 gif가 필요했고, 정적이미지와 gif를 겹쳐야 했다.

(1) 방법1, class 추가하기

• 첫 번째 방법은 mouseenter 했을 때, class를 추가하는 방식이 있었고,

(2) 방법2, 투명도 변경하기

• 또 다른 방법은 hover했을 때 정적 이미지의 투명도를 0으로 낮추는 방법이었다.

하지만...난! hover 했을 때만 실행시키고 싶은 걸! 😭😭😭😭
그래서 결국 이미지 경로를 바꾸는 방법을 사용했다!

2. 경로 변경하는 방법을 써보자!

See the Pen gif hover animation by KumJungMin (@kumjungmin) on CodePen.

(1) 경로를 변수에 담기

: 코드는 간단한다.
: 먼저 정적이미지와 gif의 경로를 변수에 담는다.

const staticImg = "...";
const gifImg = "...";

(2) 정적 이미지를 기본으로

: 그 다음 정적 이미지를 기본 경로로 적용한다.
: image에 src를 적용하라면 image.src = ".."을 하면 된다.

const image = document.querySelector('.image');
image.src = staticImg;

(3) mouse 이벤트 주기

: image에 mouseenter 이벤트가 있으면 경로를 gifImg로 변경하고,
: mouseleave를 했을 때 staticImg로 바꿔주면 완성이다!

image.addEventListener("mouseenter", function() {
  image.src = gifImg;
});
image.addEventListener("mouseleave", function() {
  image.src = staticImg;
});

단, 이 방법을 쓸 때는 정적이미지와 gif가 load된 상태여야 한다! 🧐🧐