この発想はすごい!アニメーションgifの再生・停止をコントロールできるJavaScriptライブラリ -Freezeframe.js
Post on:2019年6月26日
アニメーションgifの再生・停止をホバー・クリック・タップ、そしてボタン・アイコンでコントロールできる軽量JavaScriptライブラリを紹介します。
canvasに書き込むという発想がすごいですね。
通常アニメーションgifは自動再生されますが、このスクリプトを使用すると、ユーザーの操作をトリガーに再生・停止させることができます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201903/2019062610-01.png)
Freezeframe.jsの特徴
Freezeframe.jsではアニメーションgifの最初のフレームだけをcanvasに書き込み、gifの静止画バージョンを自動作成します。あとは、この静止画バージョンとアニメーションgifをトリガーで切り替え、アニメーションgifを再生・停止させます。
下記は、ホバーでアニメーションgifを再生・停止します。
![](http://static1.squarespace.com/static/51c748abe4b0c275d0aa86bf/55f96e21e4b0f86680e762dc/56aa551b8b38d446e39e933b/1454003533097/.gif)
cinemagraphs by cinemagraphs
ホバーで、アニメーションgifを再生・停止
トリガーは、マウスのホバー・クリック、スマホのタッチに対応しており、MITライセンスで利用できます。
Freezeframe.jsは単体で動作するスクリプトですが、Vue.js版とjQuery版も用意されています。
Freezeframe.jsのデモ
このページにFreezeframe.jsを使用してみました。
ホバーで再生・停止、クリックで再生・停止をコントロールできます。
![](http://static1.squarespace.com/static/51c748abe4b0c275d0aa86bf/55f96e21e4b0f86680e762dc/56aa551b8b38d446e39e933b/1454003533097/.gif)
![](http://static1.squarespace.com/static/51c748abe4b0c275d0aa86bf/55f96e21e4b0f86680e762dc/56aa551b8b38d446e39e933b/1454003533097/.gif)
![](http://static1.squarespace.com/static/51c748abe4b0c275d0aa86bf/55f96e21e4b0f86680e762dc/56aa551b8b38d446e39e933b/1454003533097/.gif)
cinemagraphs by cinemagraphs
ホバーで、アニメーションgifを再生・停止
![](http://static1.squarespace.com/static/51c748abe4b0c275d0aa86bf/56141631e4b0095d43132f02/5614164be4b018c0454fd619/1444744841735/pool980.gif)
![](http://static1.squarespace.com/static/51c748abe4b0c275d0aa86bf/56141631e4b0095d43132f02/5614164be4b018c0454fd619/1444744841735/pool980.gif)
cinemagraphs by cinemagraphs
クリックで、アニメーションgifを再生・停止
デモページはホバー・クリックの他に、ボタン、オーバーレイのアイコンでもアニメーションgifの再生・停止をコントロールできます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201903/2019062610-02.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201903/2019062610-02.png)
Freezeframe.jsの使い方
Step 1: 外部ファイル
当スクリプトを外部ファイルとして記述します。
1 2 3 4 |
<head> ... <script src="freezeframe.min.js"></script> </head> |
Step 2: HTML
アニメーションgifは通常通り、img要素で配置し、classを付与します。
1 |
<img class="freezeframe" src="animation.gif"> |
Step 3: JavaScript
スクリプトを初期化して実行するだけです。
1 2 3 |
<script> new Freezeframe(); </script> |
トリガーのデフォルトはホバーで、ホバー以外はコードを記述します。
1 2 3 4 5 6 |
<script> new Freezeframe({ selector: '.my-class-2', trigger: 'click' }); </script> |
sponsors