動画とか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で画像幅分横に移動していきます。
コメント