jQuery template

by mrlew

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<div id="anim">
  <center>
    <div id="ponteiro">
    </div>
  </center>


</div>
<button onclick="goncalo()">Rodar!</button>

CSS

body,
html,
div {
  margin: 0;
  padding: 0;
  width: 1050px;
  height: 69px;
  position: relative;
}

#anim {
  background: url('https://csgopolygon.com/img/cases.png?v=222') 0 0;
  background-size: 300% 100%;
}

#ponteiro {
  background-color: yellow;
  height: 69px;
  width: 5px;
}

JavaScript

function goncalo() {

  var ola = Math.floor(Math.random() * 500) + 150 + '%';
  $('#anim').css('background-position-x', 0);
  $('#anim').animate({
    'background-position-x': ola
  }, 8000, 'easeOutCubic');

}