アニメーションgifの再生・停止をホバー・クリック・タップ、そしてボタン・アイコンでコントロールできる軽量JavaScriptライブラリを紹介します。 canvasに書き込むという発想がすごいですね。 通常アニメーションgifは自動再生されますが、このスクリプトを使用すると、ユーザーの操作をトリガーに再生・停止させることができます。 Freezeframe.js -GitHub Freezeframe.jsの特徴 Freezeframe.jsのデモ Freezeframe.jsの使い方 Freezeframe.jsの特徴 Freezeframe.jsではアニメーションgifの最初のフレームだけをcanvasに書き込み、gifの静止画バージョンを自動作成します。あとは、この静止画バージョンとアニメーションgifをトリガーで切り替え、アニメーションgifを再生・停止させます。 下記は、ホバーで
![この発想はすごい!アニメーションgifの再生・停止をコントロールできるJavaScriptライブラリ -Freezeframe.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/bbaf555c0d4cf3ec7ec3e03c21b0b1912c7267c1/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201903%2F2019062610-01.png)