Css Slot Machine Animation Rating: 3,5/5 99 votes
Quick and easy CSS3 rolling-number/slot machine?
For work they wanted a 'juicy' (I've been promoting use of that term for pleasingly physical or generally pleasant animations) way of showing a randomly generated amount of virtual currency assigned to the user. I suggested a slot machine-effect, and it came out really nicely, a widget with a very high 'coolness to code complexity' ratio. Var machine = $ (foo).slotMachine ( params ); Shuffle: machine.shuffle ( repeat, onStopCallback ); //No args to make rotate infinitely. Change the selected element: machine.prev ; //Previous element machine.next ; //Next element. Get selected element: machine.active ; //Returns element index inside an object. Get 94 slot machine video effects & stock videos on VideoHive. Buy slot machine video effects & stock videos from $7.
dabblet.css
| /** |
| * Quick and easy CSS3 rolling-number/slot machine? |
| */ |
| body { |
| font-size: 700%; /* with this setup you get 1:1 em , so 1em is actually number 1 */ |
| } |
| #counter { |
| height: 1em; |
| overflow: hidden; |
| } |
| .digits { |
| float:left; |
| list-style-type: none; |
| font-size: 1em; |
| line-height: 1em; |
| } |
| .digits-first { |
| margin-top: -4em; /* number 4! */ |
| } |
| .digits-second { |
| margin-top: 0em; /* number 0! */ |
| } |
| .digits-third { |
| margin-top: -4em; /* number 4! */ |
| } |
| .digits { |
| animation-duration: 2s; |
| animation-timing-function: ease; |
| animation-delay: 2.2s; |
| animation-fill-mode: forwards; |
| } |
| .luckie { |
| animation-name: luckie; |
| } |
| /* Animations */ |
| @keyframes luckie { |
| 100% { |
| margin-top: -7em; |
| } |
| } |
dabblet.html
| <!-- content to be placed inside <body>…</body> --> |
| <divid='counter' class='animated'> |
| <ulclass='digits digits-first luckie'><li> 0 <li> 1 <li> 2 <li> 3 <li> 4 <li> 5 <li> 6 <li> 7 <li> 8 <li> 9 </ul> |
| <ulclass='digits digits-second luckie'><li> 0 <li> 1 <li> 2 <li> 3 <li> 4 <li> 5 <li> 6 <li> 7 <li> 8 <li> 9 </ul> |
| <ulclass='digits digits-third luckie'><li> 0 <li> 1 <li> 2 <li> 3 <li> 4 <li> 5 <li> 6 <li> 7 <li> 8 <li> 9 </ul> |
| </div> |
dabblet.js
settings.json
| {'view':'split','fontsize':'100','seethrough':'','prefixfree':'1','page':'all'} |
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment
Quick and easy CSS3 rolling-number/slot machine?
dabblet.css
| /** |
| * Quick and easy CSS3 rolling-number/slot machine? |
| */ |
| body { |
| font-size: 700%; /* with this setup you get 1:1 em , so 1em is actually number 1 */ |
| } |
| #counter { |
| height: 1em; |
| overflow: hidden; |
| } |
| .digits { |
| float:left; |
| list-style-type: none; |
| font-size: 1em; |
| line-height: 1em; |
| } |
| .digits-first { |
| margin-top: -4em; /* number 4! */ |
| } |
| .digits-second { |
| margin-top: 0em; /* number 0! */ |
| } |
| .digits-third { |
| margin-top: -4em; /* number 4! */ |
| } |
| .digits { |
| animation-duration: 2s; |
| animation-timing-function: ease; |
| animation-delay: 2.2s; |
| animation-fill-mode: forwards; |
| } |
| .luckie { |
| animation-name: luckie; |
| } |
| /* Animations */ |
| @keyframes luckie { |
| 100% { |
| margin-top: -7em; |
| } |
| } |
dabblet.html
| <!-- content to be placed inside <body>…</body> --> |
| <divid='counter' class='animated'> |
| <ulclass='digits digits-first luckie'><li> 0 <li> 1 <li> 2 <li> 3 <li> 4 <li> 5 <li> 6 <li> 7 <li> 8 <li> 9 </ul> |
| <ulclass='digits digits-second luckie'><li> 0 <li> 1 <li> 2 <li> 3 <li> 4 <li> 5 <li> 6 <li> 7 <li> 8 <li> 9 </ul> |
| <ulclass='digits digits-third luckie'><li> 0 <li> 1 <li> 2 <li> 3 <li> 4 <li> 5 <li> 6 <li> 7 <li> 8 <li> 9 </ul> |
| </div> |
dabblet.js
settings.json
| {'view':'split','fontsize':'100','seethrough':'','prefixfree':'1','page':'all'} |
Css Slot Machine Animation Games
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment