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 obj = $('#anim');
 
  var isAnimating = obj.attr('data-animating');
  if (isAnimating === "true") return;

  var ola = Math.floor(Math.random() * 500) + 150 + '%';	

  obj.css('background-position-x', "0%");
  obj.attr('data-animating', 'true')
  obj.animate({
    'background-position-x': ola
  }, 8000, 'easeOutCubic', function() {
  	obj.removeAttr('data-animating')
  });

}