Task: to make a roulette in a casino, which will throw out a prize. In fact, this is a fast endless carousel.

The fact is that in the fox it hangs hard for 500-1000ms due to garbage collection.

How can this problem be solved?

Maybe there are ready-made similar plugins? Because I still have to write a smooth stop on the desired pre-selected element, which I have no idea how to do at all, I would like to save time.

var $carousel = $('#carousel'); var slideWidth = 500; var prigress = 0; setInterval(function() { prigress -= 50; $carousel.css({ left: prigress }); if (prigress % slideWidth == 0) { $('.slide:last').after($('.slide:first')); $carousel.css({ left: 0 }); prigress = 0; } }, 13); 
 body { background: #333; color: #fff; } .wrap { position: relative; width: 900px; height: 300px; } .window { overflow: hidden; position: relative; background: #222; } #carousel { width: 10000px; position: relative; top: 0; left: 0; } .slide { height: 300px; width: 500px; float: left; display: flex; flex-direction: column; justify-content: center; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrap"> <div class="window"> <div id="carousel"> <span class="slide" id="b1">SLIDE-1</span> <span class="slide" id="b2">SLIDE-2</span> <span class="slide" id="b3">SLIDE-3</span> <span class="slide" id="b4">SLIDE-4</span> <span class="slide" id="b5">SLIDE-5</span> </div> </div> </div>

  • No, it does not freeze. Everything is smooth. - user242433
  • I support. The animation is smooth, without delays. - Cheg
  • The author is trying to make an analogue of the opening of the CS: GO case. So why not look at any of these resources like how they implemented it? - SlyDeath

1 answer 1

When you change a set of values ​​for six CSS properties: margin, padding, top, left, bottom, or right, the browser performs additional calculations on how it appears on the layout of the entire page. Therefore, to increase the performance of animation is better to use:

 .foo { transform: translate3d(x, y, z); }

The reason transform is more productive is that it does not affect any other elements. Any actions that you perform apply to only one element, and the browser does not need to rebuild the entire window. It modifies only the part of the screen that contains the moving content.

Also, when converting an element using translate3d, it is processed through the GPU in Webkit browsers such as Chrome and Safari (which are installed on the iPhone and iPad), in Internet Explorer 9/10, and also in recent versions of Firefox.

Therefore, when using translate3d you get the benefits of local screen adjustment. But besides this, you get additional benefits, since all the work is done by the GPU.

Implementing an example through transform :

 var $carousel = $('#carousel'); var slideWidth = 500; var prigress = 0; setInterval(function() { prigress -= 50; $carousel.css("transform","translate3d("+prigress+"px,0,0)"); if (prigress % slideWidth == 0) { $('.slide:last').after($('.slide:first')); $carousel.css({ left: 0 }); prigress = 0; } }, 13); 
 body { background: #333; color: #fff; } .wrap { position: relative; width: 900px; height: 300px; } .window { overflow: hidden; position: relative; background: #222; } #carousel { width: 10000px; position: relative; top: 0; left: 0; } .slide { height: 300px; width: 500px; float: left; display: flex; flex-direction: column; justify-content: center; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrap"> <div class="window"> <div id="carousel"> <span class="slide" id="b1">SLIDE-1</span> <span class="slide" id="b2">SLIDE-2</span> <span class="slide" id="b3">SLIDE-3</span> <span class="slide" id="b4">SLIDE-4</span> <span class="slide" id="b5">SLIDE-5</span> </div> </div> </div>