[JS]アニメーションgifにスタートとストップ機能をつけられるスクリプト -gifplayer

Post on:2014年3月14日

sponsors

アニメーションgifは画像が表示されるとすぐにアニメーションが動き出しますが、それらのアニメーションgifにスタートとストップ機能をつけられるjQueryのプラグインを紹介します。

スタートをクリックしてからアニメーションgifをロードするので、ページの軽量化にもなる優れものです。

gifplayerのデモ

デモでは、アニメーションgifの画像にオーバーレイで「gif」と表示されており、クリックするとアニメーションgifが再生されます。
再生中にアニメーションgifをクリックすると、ストップします。

「gif」ボタンのとこには、三角アイコンや「再生」ボタンでもよさそうですね。

jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。

<link rel="stylesheet" href="css/gifplayer.css">
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.gifplayer.js"></script>

HTMLはimg要素で静止時の画像を配置し、data属性でアニメーションgifを指定します。

<img id="banana" src="img/banana.png" data-gif="img/banana-animated.gif" class="gifs"/>

data属性を使用せずに、静止画像とアニメーションgifを同じ名前で同じフォルダに入れておくだけでも大丈夫です。

<img id="banana" src="img/banana.png" class="gifs"/>

jQueryのセレクタで画像を指定し、スクリプトを実行します。

<script>
	$('.gifs').gifplayer();
</script>