この発想はすごい!アニメーションgifの再生・停止をコントロールできるJavaScriptライブラリ -Freezeframe.js

アニメーションgifの再生・停止をホバー・クリック・タップ、そしてボタン・アイコンでコントロールできる軽量JavaScriptライブラリを紹介します。
canvasに書き込むという発想がすごいですね。

通常アニメーションgifは自動再生されますが、このスクリプトを使用すると、ユーザーの操作をトリガーに再生・停止させることができます。

サイトのキャプチャ

Freezeframe.js -GitHub

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: 外部ファイル

当スクリプトを外部ファイルとして記述します。

Step 2: HTML

アニメーションgifは通常通り、img要素で配置し、classを付与します。

Step 3: JavaScript

スクリプトを初期化して実行するだけです。

トリガーのデフォルトはホバーで、ホバー以外はコードを記述します。

sponsors

top of page

©2019 coliss