gif hover 재생 이벤트 만들기

gicomong·2021년 5월 22일
3
post-thumbnail

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


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



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

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



1) 방법1, class 추가하기

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

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

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



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



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

!codepen[kumjungmin/embed/vYxxxYG?height=474&theme-id=dark&default-tab=js,result]


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된 상태여야 한다! 🧐🧐

profile
⚠ 이 블로거는 퇴근 후 극심한 피로감 + 강렬한 휴식 욕구로 인해 일주일 이상 포스팅이 없을 수 있습니다. 하지만 항상 좋은 내용을 담고자 합니다🙇🏼

관심 있을 만한 포스트

0개의 댓글