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

サイト制作
この記事は約4分で読めます。
スポンサーリンク

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

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

この方法は画像を好きな枚数用意して、その画像を1枚づつ入れ替えていく方法。
用意する画像名は、「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);
});

水滴画像1~10をダウンロード
このアニメーションの方法は、HTMLの画像の「src」内の画像名を変更して画像を切り替えます。

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

連続した横長の1枚の画像の表示位置を切り替えてパラパラアニメーションっぽくする方法。
言葉でいうより、見た方が早いよね。
下の画像の表示位置を切り替えてアニメーションっぽく見せる方法で、サイズを間違えると変な風になっちゃうのが注意!
水滴スプライト画像
このスプライトアニメーションの方が画像をアニメーションさせる方法として一般的で
読み込み容量が少なくて済むし、画像が1枚で済むから分かりやすい。
欠点は、画像を作るのがちょっとめんどくさい所。
アニメーションさせる画像の数が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で画像幅分横に移動していきます。

SNSフォローボタン
エンデ・バタローをフォローする
サイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました