JavaScript
jQuery

【ライブラリ】スロットマシン

Odometer

Demo : https://codepen.io/mo4_9/pen/ayRPaq

http://black-flag.net/jquery/20131203-4888.html

メリット

  • 数字に強い(専用?)

デメリット

  • 数字表現のみ
  • 画像設定が面倒臭い

ハック

  • スピードを調整する
    durationプロパティが効かないので、以下のcssをあてる
.odometer.odometer-animating-up .odometer-ribbon-inner,
.odometer.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
    -webkit-transition-duration: 10s !important;
    -moz-transition-duration: 10s !important;
    -ms-transition-duration: 10s !important;
    -o-transition-duration: 10s !important;
    transition-duration: 10s !important
}

参考
https://github.com/HubSpot/odometer/issues/91

jQuery-SlotMachine

Demo : https://codepen.io/mo4_9/pen/jLRdRE

https://github.com/josex2r/jQuery-SlotMachine

メリット

  • シャッフルするだけのモックに使える

デメリット

  • 終点が決められない

Roulette.js

Demo : https://codepen.io/mo4_9/pen/ZJZwOz

http://pannyatto.firebird.jp/archives/1938

メリット

  • 終点を決めて、画像をさくっと回したい時にだけ使える

デメリット

  • imgタグしか対応していない(background-imageは不可)
  • 回転方向反転のプロパティがない(以下のハックで回転可能)

ハック

  • 回転方向を反転させる
外枠を180度回転させて、画像も180度回転させる
.roulette{
  transform:rotate(180deg);
}
img{
  transform:rotate(180deg);
}
  • 回転スピードを変える
    ライブラリの中身を見ていくとroll関数があるので、そこで_speedに加算する値を変えてしまう

CSS

スプライト画像がつくれる状況ならcssで事足りる

カルーセルライブラリで高速回転させる

easeout系で止まるときに不自然になりそうだから無理っぽい
(やったことないからわからない。思いつき。)