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

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

デモ HTML CSS .suiteki < position: relative; width: 300px; height: 300px; display: block; margin: 0 auto; overflow: hidden; >.suiteki img jQuery var num = 0; var img = $(".suiteki img"); // 画像のクラス名 var max = 10; // 画像枚数 var imgWidth = 300; // 画像の横幅 var speed = 90; // 画像切り替えスピード setInterval(function() < num++ img.css(); if(num == max - 1) >, speed);

📎📎📎📎📎📎📎📎📎📎