jQueryでパラパラ漫画

Tweet

Category JavaScript, jQueryPlugin 2013/04/08

普通の画像・写真で、アニメーションGIFっぽいことをする。

パラパラ漫画のような表示をする。

↑ Nexus7の開封の様子

以下のコピー＆貼り付けで動くと思います（以下のソースはコピー、改変して自由にお使いください）。

JavaScript

/**
 * jQuery plugin parapara
 * 
 * d:duration
 */
(function($){ 
	$.fn.parapara = function (o) {
		return this.each(function(){
			var o = $.extend({d:1000}, o);
			var c = $(this).children();
			var a = 0;
			var r = function(){c.hide(); c.eq(a % c.length).show(); ++a;}
			r();
			setInterval(r, o.d);
		});
	}
})(jQuery);

/**
 * onload
 */
$(function(){
	$('.js-parapara').parapara();
});

HTML

<div class="js-parapara">
	<p><img src="1.jpg"></p>
	<p><img src="2.jpg"></p>
	<p><img src="3.jpg"></p>
	<p><img src="4.jpg"></p>
	<p><img src="5.jpg"></p>
</div>

仕様・使用上の注意など

• 指定した要素の子要素を、順番に表示していきます。

  上の例では、.js-parapara の子要素のpがパラパラします。

  他には、div要素の中に、img要素を並べるもよし、pでなくてdivで囲んでもOKです。HTMLは表示の都合に合わせて変えてよいです。

• オプションで、$(‘.js-parapara’).parapara({d:500}); のように引数を渡すと、1枚の表示時間（ミリ秒）を指定できます。

• 画像の大きさは調整していないので、同じ大きさの画像を並べるか、CSSでガタガタしないように調整して使ってください。

• 画像をすべてダウンロードし終わるのを待ったりしていないので、大きな画像のときは、ダウンロード中なのにパラパラ漫画が始まってしまうかもしれません。（$(function(){}) でなくて、$(window).load(function(){}) で開始するのもよいでしょう。）