この発想はすごい！アニメーションgifの再生・停止をコントロールできるJavaScriptライブラリ -Freezeframe.js
Post on:2019年6月26日
sponsors
アニメーションgifの再生・停止をホバー・クリック・タップ、そしてボタン・アイコンでコントロールできる軽量JavaScriptライブラリを紹介します。
canvasに書き込むという発想がすごいですね。
通常アニメーションgifは自動再生されますが、このスクリプトを使用すると、ユーザーの操作をトリガーに再生・停止させることができます。
Freezeframe.jsの特徴
Freezeframe.jsではアニメーションgifの最初のフレームだけをcanvasに書き込み、gifの静止画バージョンを自動作成します。あとは、この静止画バージョンとアニメーションgifをトリガーで切り替え、アニメーションgifを再生・停止させます。
下記は、ホバーでアニメーションgifを再生・停止します。
cinemagraphs by cinemagraphs
ホバーで、アニメーションgifを再生・停止
トリガーは、マウスのホバー・クリック、スマホのタッチに対応しており、MITライセンスで利用できます。
Freezeframe.jsは単体で動作するスクリプトですが、Vue.js版とjQuery版も用意されています。
Freezeframe.jsのデモ
このページにFreezeframe.jsを使用してみました。
ホバーで再生・停止、クリックで再生・停止をコントロールできます。
cinemagraphs by cinemagraphs
ホバーで、アニメーションgifを再生・停止
cinemagraphs by cinemagraphs
クリックで、アニメーションgifを再生・停止
デモページはホバー・クリックの他に、ボタン、オーバーレイのアイコンでもアニメーションgifの再生・停止をコントロールできます。
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
