How can I have a slot machine effect using jQuery and CSS

Question

I want to make a slot machine. I am taking random index from array and populating it inside my div. But the only issue is that I want to have a slot machine effect . I mean that the effect should be like numbers are dropping from top to bottom. This is my code so far.

 var results = [ 'PK12345', 'IN32983', 'IH87632', 'LK65858', 'ND82389', 'QE01233' ]; // Get a random symbol class function getRandomIndex() { return jQuery.rand(results); } (function($) { $.rand = function(arg) { if ($.isArray(arg)) { return arg[$.rand(arg.length)]; } else if (typeof arg === "number") { return Math.floor(Math.random() * arg); } else { return 4; // chosen by fair dice roll } }; })(jQuery); // Listen for "hold"-button clicks $(document).on("click", ".wheel button", function() { var button = $(this); button.toggleClass("active"); button.parent().toggleClass("hold"); button.blur(); // get rid of the focus }); $(document).on("click", "#spin", function() { // get a plain array of symbol elements var symbols = $(".wheel").not(".hold").get(); if (symbols.length === 0) { alert("All wheels are held; there's nothing to spin"); return; // stop here } var button = $(this); // get rid of the focus, and disable the button button.prop("disabled", true).blur(); // counter for the number of spins var spins = 0; // inner function to do the spinning function update() { for (var i = 0, l = symbols.length; i < l; i++) { $('.wheel').html(); $('.wheel').append('<div style="display: none;" class="new-link" name="link[]"><input type="text" value="' + getRandomIndex() + '" /></div>'); $('.wheel').find(".new-link:last").slideDown("fast"); } if (++spins < 50) { // set a new, slightly longer interval for the next update. Makes it seem like the wheels are slowing down setTimeout(update, 10 + spins * 2); } else { // re-enable the button button.prop("disabled", false); } } // Start spinning setTimeout(update, 1); }); // set the wheels to random symbols when the page loads $(function() { $(".wheel i").each(function() { this.className = getRandomIndex(); // not using jQuery for this, since we don't need to }); }); 

 .wheel { width: 25%; float: left; font-size: 20px; text-align: center; } .wheel .fa { display: block; font-size: 4em; margin-bottom: 0.5em; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <div id="wheels"> <div class="wheel clearfix"> </div> <!-- add more wheels if you want; just remember to update the width in the CSS --> </div> <p class="text-center"> <button id="spin" type="button" class="btn btn-default">Spin</button> </p> 

Answer 1

I managed to create a similar effect by using prepend() rather than append() , and adding a set height and hiding the overflow of the wheel.

CSS:

.wheel {
    ...
    height: 34.4px;
    overflow: hidden;
}

JS:

$('.wheel').prepend('<div style="display: none;" class="new-link" name="link[]"><input type="text" value="' + getRandomIndex() + '" /></div>');
//Using "first-of-type" rather than "last"
$('.wheel').find(".new-link:first-of-type").slideDown("fast");

See it working here .

Answer 2

Like so many animations it's a lot easier to fake this animation by reversing what appears to be happening, rather than making it work "correctly".

Use the code you have now to generate a result. Then create an animation for a "spinning wheel", you could shuffle divs, or you could make a 3d wheel in css. While the faces are spinning, do some calculations to decide where the wheel should stop to match your results. Then work backwards from there: You'll want to trigger your "stopping" animation so that the face is showing. Your stopping animation would be a predetermined amount of rotation and speed so that a face can be reliably shown. Depending on how fast your wheel spins, the user may lose track, if this is acceptable it may not matter when you trigger as no one could see the wheel jump.

A simulation on the other hand would use a physics model...