JSFiddle - React, Tailwind, and code Playground

by xenos92

HTML

<div class="slot_machine" id="slot_machine">
    <div class="bloc">
        <div class="inside_bloc" id="inside_slot1">
            <p>5</p>
            <p>10</p>
            <p>15</p>
            <p>20</p>
            <p>25</p>
            <p>30</p>
            <p>35</p>
            <p>40</p>
            <p>45</p>
            <p>50</p>
            <p>5</p>
        </div>
    </div>
</div>

SCSS

.slot_machine{
    position: absolute;
	bottom : 25px;
	left : 0;
	width : 80%;
	height : 435px;
	left : (100% - 80%)/2;
	font-size: 3rem;
	background-color: pink;
    @include border-radius(75px);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	padding-left: 1%;
	padding-right : 1%;
	.bloc{
		margin : 0 auto;
        position: relative;
		height : 380px;
		width : 50%;
		@include border-radius(50px); 
		background-color: grey;
		overflow: hidden; // a remettre pour voir resultat
		.inside_bloc{
			height : 380px;
			width : 100%;
			margin : 0;
				p{
					font-size: 200px;
					height : 380px;
                    margin : 0;
                    padding : 0;
					line-height: 380px;
					width : 100%;
					color : black;
					text-align: center;
					font-weight: bold;
					&:nth-child(1){
						background-color: green;
					}
					&:nth-child(2){
						background-color: red;
					}
					&:nth-child(3){
						background-color: blue;
					}
					&:nth-child(4){
						background-color: pink;
					}
					&:nth-child(5){
						background-color: yellow;
					}
					&:nth-child(6){
						background-color: grey;
					}
					&:nth-child(7){
						background-color: green;
					}
					&:nth-child(8){
						background-color: blue;
					}
					&:nth-child(9){
						background-color: #FFF;
					}
					&:nth-child(10){
						background-color: brown;
					}
					&:nth-child(11){
						background-color: yellow;
					}
				}
		}
        #inside_slot1{
			-webkit-animation : slot_number 1s linear infinite;
		}
	}
}
@-webkit-keyframes slot_number{
	$size : 380px;
	from{margin-top: -($size*10);}
	to{margin-top: 0;}
}

JavaScript

var slot_machine_system = function(){
    
    var system = function($elem,$delais){
      nbr_slot          = $( '#inside_slot1'+' > *').length - 1;// je retire l'elem qui boucle
      nbr_hasard        = Math.floor((Math.random() * nbr_slot) + 1);// nombre au hasard entre 1 et nbrmax elem
      temps_anim        = 1; // temps d'animm css 1s
      temps_slot        =  temps_anim / nbr_slot;
      position  = nbr_hasard * temps_slot;
      position_clear = position.toFixed(2);
      position_seconde  = position_clear * 1000;// je multiplie par 1000 pour injecter dans delais
      temps_final_slot = position_seconde;

      slot = document.getElementById("inside_slot1");
        
     setTimeout(function() {
         $(slot).css('-webkit-animation-play-state','paused');
      }, temps_final_slot);

    }
    system('#inside_slot1',0);
}
slot_machine_system();