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

Odometer

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

メリット

• 数字に強い（専用？）

デメリット

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

ハック

• スピードを調整する
  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

メリット

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

デメリット

• 終点が決められない

Roulette.js

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

メリット

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

デメリット

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

ハック

• 回転方向を反転させる

外枠を180度回転させて、画像も180度回転させる

.roulette{
  transform:rotate(180deg);
}
img{
  transform:rotate(180deg);
}

• 回転スピードを変える
  ライブラリの中身を見ていくとroll関数があるので、そこで_speedに加算する値を変えてしまう

CSS

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

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

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