ITエンジニア/デザイナ向けにオープンソースを毎日紹介

アニメーションGIFは動画と違ってハイライト部分だけを繰り返したり、YouTubeのように埋め込んだりする必要がないので手軽に扱えます。自動再生されるのが便利ですが、途中で止めたいと思うこともあるでしょう。

そんな時に使えるのがfreezeframe.jsです。アニメーションGIFの再生、停止を制御できるJavaScriptライブラリです。

freezeframe.jsの使い方

マウスオーバーで再生停止を変更できます。

外部のイベントで再生停止もできます。

動画っぽいボタンを表示することも。

freezeframe.jsを読み込むだけでマウスオーバーやクリック、タッチイベントを使ってアニメーションGIFの再生/停止を行えます。なお、再生すると途中からではなく最初からの再生となるようです(執筆時点)。

freezeframe.jsはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

freezeframe.js

ctrl-freaks/freezeframe.js: freezeframe.js is a library that pauses animated .gifs and enables them to animate on mouse hover / mouse click / touch event, or with trigger / release functions.

 

MOONGIFTの関連記事

  • DevRel
  • Com2