ざこノート
2018-05-24 [js]

[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>

感謝