JSFiddle - React, Tailwind, and code Playground

by Anton Oc

HTML

<div id='xxx1' class='XXX'>
<div class='X'>Всё удачно!</div> <!-- а вот тут - 10 картинок -->
<div class='X'>Мы растём!</div>
<div class='X'>Знаю ответы!</div>
<div class='X'>Все любят!</div>
<div class='X'>Мы дружим!</div>
<div class='X'>Многое реально!</div>
<div class='X'>Вокруг успех!</div>
<div class='X'>Всё есть!</div>
<div class='X'>Я хорош!</div>
<div class='X'>Всё в плюсе!</div>
<div class='X'>Я богаче!</div> 
<div class='X'>Всё можно!</div> <!-- а вот тут - 10 картинок -->
<div class='X'>Мне верят!</div>
<div class='X'>Мы вместе!</div>
<div class='X'>Вокруг добро!</div>
<div class='X'>Со мной удача!</div>
<div class='X'>Вижу суть!</div>
<div class='X'>Я понимаю!</div>
<div class='X'>Всё как надо!</div>
<div class='X'>Я хороша!</div>
<div class='X'>Денег много!</div>
<div class='X'>Выбираю успех!</div> 
</div>
<input type='button' onclick='LetsGo()' value='Будет исполнено!'>

CSS

.XXX {width: 550px; height: 100px; border: 1px solid green; overflow:hidden;float:left}
  .X {font-size:70px;width:100%;text-align:center; height:85px;}/* << вот тут 80!!!*/

JavaScript

var oneHeight=85, // размер одного элемента
    numImage=20, // количество элементов
    speedStep=0.5; // скорость изменения скорости
function LetsGo(){
    clearInterval(LetsGo.interval);
    var x=[];
    for(var i in{xxx1:1}){
        var ob=5+Math.floor(Math.random()*6), // количество оборотов 5 минимум, 20 - максимум
         nn=Math.random()*numImage;
            num=Math.floor(nn), // выигравший нумер
            o={
                ob:ob,num:num,
            a:document.getElementById(i), // это наш контрол с классом XXX
            // время=(speedStart)/speedStep
            // расстояние=(speedStart/2)*время -арифм прогр
            // расстояние=speedStart^2/(2*speedStep)
            // speedStart=sqrt(расстояние*2*speedStep)
            speed:Math.sqrt(((ob*numImage+num)* oneHeight)* speedStep*2), // скорость
            scr:-26 // магия, блин 
        }; // выигравший номер
        x.push(o);
    } 
    LetsGo.interval=setInterval(
        function (){
            var i = x.length,complete=true;
            while(i--){ 
                var a=x[i];
                a.scr+=a.speed;
                if(a.speed>2*speedStep){ 
                    a.speed-=speedStep;complete=false;
                } else if(a.speed>0) { 
                    var t= Math.round(a.scr / oneHeight);
                    if(t>=numImage) t=0;
                    console.log(i,t,a.scr-oneHeight*t,a.ob,a.num);
                    a.scr=oneHeight*t;
                    a.speed=0;
                    complete=false;
                }
                if(a.scr>(oneHeight*numImage))
                    a.scr-=oneHeight*numImage;
                a.a.scrollTop=Math.floor(a.scr);
            }
            if(complete) clearInterval(LetsGo.interval)
        },20)
}