썸네일에 들어가는 gif 멈추게하는 스크립트
본문
gif 멈추게하는 스크립트가 있나요?
답변 4
<button>
Stop Animations
</button>
<p>
A load of body text, blah blah blah
</p>
<img src="https://media.tenor.com/vxJjiiRh3CUAAAAd/%EC%B6%98%EC%8B%9D-%EC%B6%98%EC%8B%9D%EC%9D%B4.gif" alt=""/>
<script>
var stopAnim = (function () {
var priv = {};
var pub = {};
priv.pauseAll = false;
if(window.matchMedia){
var mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
if (!mediaQuery || mediaQuery.matches) { priv.pauseAll = true }
}
priv.stopAnim = function (img) {
var coverImage = function () {
setTimeout(function(){
var width = img.width;
var height = img.height;
var canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').drawImage(img, 0, 0, width, height);
canvas.style.position = 'absolute';
canvas.setAttribute('aria-hidden', 'true');
canvas.setAttribute('role', 'presentation');
var parent = img.parentNode;
parent.insertBefore(canvas, img);
img.style.opacity = 0.01;
}, 250);
};
if (img.complete) {
coverImage();
} else {
img.addEventListener('load', coverImage, true);
}
}
pub.freezeAll = function () {
//var images = document.querySelectorAll('.crayons-article__header img, .crayons-article__main img, .crayons-avatar img');
var images = document.querySelectorAll('img');
for (x = 0; x < images.length; x++) {
priv.stopAnim(images[x]);
}
};
if (priv.pauseAll == true) {
pub.freezeAll();
}
return pub;
})();
var btn = document.querySelector('button');
btn.addEventListener('click', function(){
stopAnim.freezeAll();
})
</script>
통상은 GIF가 아닌 정적 이미지를 하나 만들어놓구
평상시에는 정적 이미지 파일을 보이게 하고
hover시에 gif가 보여지겠금 하는 형태 구성을 합니다.
https://codepen.io/zjun/pen/dGPqzQ
여기 보시면 1s 를 0s 로 바꾸면 되요
animation: like-gif steps(28) 1s infinite both;
개노미님꺼로 하니까 잘 되네요.
<p><a href="#" class="article-body-image-wrapper"><img src="http://minyho.duckdns.org/170228-M-02.gif" alt='person shaking their head side to side wearing white suit - "sassy"' loading="lazy" width="200" height="150" data-animated="true"></a></p>
<script src="https://dev.to/packs/js/runtime~articlePage-31a43a747ab9191e06a0.js" defer="defer"></script>
<script src="https://dev.to/packs/js/0-7e2f02f299313d314059.chunk.js" defer="defer"></script>
<script src="https://dev.to/packs/js/1-791486a819b76753adf9.chunk.js" defer="defer"></script>
<script src="https://dev.to/packs/js/articlePage-608c9ca2bc4ff420cd99.chunk.js" defer="defer"></script>
답변을 작성하시기 전에 로그인 해주세요.
