前のサンプルでは、絵柄が動きはしましたが、まだスロットっぽい動きにはなっていないですよね。
ここから課題をひとつずつ潰して、カスタマイズしていきましょう。
| 課題１ |
Q.
スピード感がないよね？
|
A.
スロットの絵柄の数を増やそう！
5秒間にたくさんの絵柄の移動処理をすれば、スピードはUPします。
|
| 課題２ |
Q.
絵柄が固定だったら、最後に表示される結果はいっしょだね？
|
A.
絵柄のimgタグの種類をランダムに作成しよう！
もちろん、JavaScriptで。
|
| 課題３ |
Q.
枠の外側にスロットの絵柄がはみ出して見えているよね？
|
A.
divタグのoverflowスタイルを「hidden」にすれば、はみ出した分は非表示に！
|
| 課題４ |
Q.
easingを'easeOutBack'にした時に、最後に戻る分、白い背景が見えちゃう・・・
|
A.
marginTopの最終値を0pxではなく、手前のマイナス値でストップしよう！
どの値までが丁度よいかは表示する絵柄の数で変わってくるので、動きを確認しながら調整しましょう。
|
これらの課題を解消したサンプルがこちらです。
どうでしょう？
スロットらしくなってきましたね！
ここまでのサンプルのソースです。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script>
// スロット画像配列
var slotImg = ['slot1.jpg','slot2.jpg','slot3.jpg','slot4.jpg','slot5.jpg'];
// 縦に並べるスロット画像の数
var slotNum = 50;
// スロット画像のスタート位置
var startPos = -30 * (slotNum - 3);
// スロット画像の停止位置
var stopPos = -150;
// スロット移動の時間（ミリ秒）
var moveTime = 5000;
$(document).ready(function() {
// A枠にスロット画像を生成
slotCreate( $("#slots_a .wrapper") );
// B枠にスロット画像を生成
slotCreate( $("#slots_b .wrapper") );
// C枠にスロット画像を生成
slotCreate( $("#slots_c .wrapper") );
});
/* スロット画像生成 */
function slotCreate(obj){
// アニメーションをストップ（アニメーション処理中の場合の対応）
obj.stop(true, true);
// 枠内の要素をクリア
obj.children().remove();
// スロット画像のタグ生成
for (var i = 1; i <= slotNum; i++) {
// 画像ファイルは配列からランダムに取得
var idx = Math.floor(Math.random() * slotImg.length);
obj.append("<div class='slot'>"
+ "<img border='0'"
+ " src='img/" + slotImg[idx] + "'"
+ " width='40' height='26' />"
+ "</div>");
}
// スロット画像のスタート位置を設定
obj.css({
"margin-top" : startPos + "px"
});
}
/* スロットスタート */
function slotStart(){
// A枠のスロット画像移動
slotMove($("#slots_a .wrapper"));
// 少し遅れてB枠のスロット画像移動
setTimeout( function(obj) {
slotMove(obj);
}, 200, $("#slots_b .wrapper") );
// さらに少し遅れてC枠のスロット画像移動
setTimeout( function(obj) {
slotMove(obj);
}, 400, $("#slots_c .wrapper") );
}
/* スロット画像移動 */
function slotMove(obj){
if ( obj.css("margin-top") != startPos ){
// スロットが動いた後であれば、スロット画像を再作成
slotCreate( obj );
}
// スロット画像の移動アニメーション
obj.animate({
"margin-top" : stopPos + "px"
}, {
'duration' : moveTime,
'easing' : $("#easing").val()
});
};
</script>
<style>
* {
box-sizing: border-box;
}
#slots_a,
#slots_b,
#slots_c {
float: left;
width: 48px;
height: 94px;
border: 2px solid;
overflow: hidden;
}
#slots_a .wrapper,
#slots_b .wrapper,
#slots_c .wrapper {
width: 46px;
}
#slots_a .wrapper .slot,
#slots_b .wrapper .slot,
#slots_c .wrapper .slot {
width: 46px;
height: 30px;
text-align: center;
padding-top: 2px;
}
</style>
<div id="slots_a">
<div class='wrapper'></div>
</div>
<div id="slots_b">
<div class='wrapper'></div>
</div>
<div id="slots_c">
<div class='wrapper'></div>
</div>
<br style="clear: both" />
easing:<br />
<select id="easing">
<option value="easeOutQuart">easeOutQuart</option>
<option value="easeOutBack" selected>easeOutBack</option>
<option value="easeOutBounce">easeOutBounce</option>
</select>
<br /><br />
<input type="button" value="スタート！" onclick="javascript:slotStart();" />