【jQuery】パラパラ漫画の作り方｜画像切り替え＆スプライト画像アニメ

動画とかGifを複数個ウェブページに載せると容量がデカくなっちゃって、困る時がある。デザインを変えようか、それとも何個か省いてページ作成するか….。そんな状況の時に使えるのが、パラパラアニメーション！容量を抑えるだけじゃなくココのコードをコピペすればすぐ出来ちゃう！用意した画像に合わせて２つのアニメーション方法をご紹介します。

初めての目次

複数枚の画像を切り替えるパラパラアニメーション
１枚の画像の表示位置を切り替えるスプライトアニメーション

複数枚の画像を切り替えるパラパラアニメーション

この方法は画像を好きな枚数用意して、その画像を１枚づつ入れ替えていく方法。用意する画像名は、「1.png」から始めて連番で画像作成していってね！今回は画像「1.png」～「10.png」まで用意してアニメーションしてみます！画像枚数、画像形式は自由に作成してね！では、デモから見て下さい。

デモ HTML <div class="suiteki"> <img src="img/1.png" alt="水滴画像" /> </div> CSS .suiteki { width: 300px; height: 300px; display: block; margin: 0 auto; } jQuery $(function() { var num = 0; var img = $(".suiteki img"); // 画像のクラス名 var max = 10; // 画像枚数 var speed = 90; // 画像切り替えスピード // パラパラアニメーション setInterval(function() { num++ // 画像形式を変更する場合は ↓の「.png」を変更してね！ img.attr({src: 'img/' + num + '.png'}); // アニメーションを繰り返さない場合は ↓の一行を削除してね！ if(num == max) {num = 0;} }, speed); });

水滴画像１～１０をダウンロード

このアニメーションの方法は、HTMLの画像の「src」内の画像名を変更して画像を切り替えます。

１枚の画像の表示位置を切り替えるスプライトアニメーション

連続した横長の１枚の画像の表示位置を切り替えてパラパラアニメーションっぽくする方法。言葉でいうより、見た方が早いよね。下の画像の表示位置を切り替えてアニメーションっぽく見せる方法で、サイズを間違えると変な風になっちゃうのが注意！このスプライトアニメーションの方が画像をアニメーションさせる方法として一般的で読み込み容量が少なくて済むし、画像が１枚で済むから分かりやすい。欠点は、画像を作るのがちょっとめんどくさい所。アニメーションさせる画像の数が100枚とかあると、photoshopで並べるだけで一苦労。でも、そんな苦労もCSS Sprite Generatorが有ればすぐ解決！ shanabrian.comさん便利なサービス作ってくださりありがとうございます！「CSS Sprite Generator」はバラバラになっている画像を1つの画像ファイルに結合するジェネレーターです。では、さっきのデモと変わらないけどどうぞ！！

デモ HTML <div class="suiteki"> <img src="img/suiteki-1.png" alt="水滴画像" /> </div> CSS .suiteki { position: relative; width: 300px; height: 300px; display: block; margin: 0 auto; overflow: hidden; } .suiteki img { position: absolute; top: 0; left: 0; max-width: none; width: auto; height: 100%; display: block; } jQuery var num = 0; var img = $(".suiteki img"); // 画像のクラス名 var max = 10; // 画像枚数 var imgWidth = 300; // 画像の横幅 var speed = 90; // 画像切り替えスピード setInterval(function() { num++ img.css({transform: 'translateX( -' + imgWidth * num + 'px)'}); if(num == max - 1) {num = 0;} }, speed);

スプライト画像をダウンロード

iQueryでスプライトアニメーションをする時は、CSSで水滴画像の親要素（.suiteki）に「overflow:hidden」を指定し、見せたい画像幅以外は消して、jQueryで画像幅分横に移動していきます。

📎📎📎📎📎📎📎📎📎📎