2018-05-24 (木)
[js] Gifffer gifアニメをクリックしたら再生する
依存性がなく軽量(約5KB)なGiffferを使用します。gifアニメの静止画を動的に生成され、画像クリックされたら再生するようにします。
環境
- Windows 10 Pro 64bit 1709
- Google Chrome 66.0.3359.181 64bit
- Gifffer 1.5.0
krasimir/gifffer
https://github.com/krasimir/gifffer
結果
以下の再生ボタンをクリックすると再生します。
公式デモです。
http://krasimir.github.io/gifffer/
実装
シンプルな使用例です。
最初のgifだけ初期再生させたり、色々なオプションもあります。
<body>
<img data-gifffer="sample.gif" data-gifffer-alt="altの説明" />
<script src="//cdnjs.cloudflare.com/ajax/libs/gifffer/1.5.0/gifffer.min.js"></script>
<script>
window.onload = function() {
Gifffer();
}
</script>
</body>
感謝
関連記事
新着記事