アニメーションGIFをマウスホバーやクリックで再生・停止できるようになるJavaScriptライブラリ「Freezeframe.js」

Freezeframe.jsは、マウスホバーやクリックによってアニメーションGIFの再生・停止を制御できるようにするJavaScriptライブラリです。

以下のデモページで挙動を確認できます。

デモページを見る

Freezeframe.jsの使い方

ステップ1. Freezeframe.jsのダウンロードと設置

GitHubからファイル一式をダウンロードします。ダウンロードしたファイルを解凍し、/packages/freezeframe/distフォルダ内にあるfreezeframe.min.jsをサーバーにアップロードしましょう。

以下をHTMLの</body>の直前に追加し、freezeframe.min.jsを読み込みます。

<script src="packages/freezeframe/dist/freezeframe.min.js"></script>

ファイルパスは適宜変更してください。

ステップ2. アニメーションGIFの設置

アニメーションGIFのimg要素には.freezeframeクラスを追加してあげます。

<img class="freezeframe" src="images/example.gif">

ステップ3. Freezeframe.jsの実行

freezeframe.min.jsを読み込んでいる箇所の下に、以下スクリプトを追加します。アニメーションGIFにマウスホバーすると再生開始されるようになります。

<script>new Freezeframe();</script>

特定のクラスのみに適用したい場合は、クラス名を指定してあげます。

<script>new Freezeframe('.my-class');</script>

マウスホバーではなくクリックで再生・停止させたい場合は、triggerオプションで”click”を指定します。selectorはクラスの指定です。

<script>
new Freezeframe({
  selector: '.my-class',
  trigger: 'click'
});
</script>

あとがき

アニメーションGIFの再生を制御したい場合は、ぜひ導入をご検討ください。

ユーザーに再生・停止を操作してもらいたい場合は、アニメーションGIFにこだわらず動画を設置した方が良い気もします(^^;