Coin earning animation

js + css

by Евгений

HTML

<div class="coin-wrap">
  <img class="coin" src="https://lh3.googleusercontent.com/-PbVmtX2OQ9A/AAAAAAAAAAI/AAAAAAAAAAA/Dayy4JRdwPI/photo.jpg">
</div>
<button class="like">click me</button>

CSS

.coin {
  width: 32px;
  height: 32px;
}
.coin-wrap {
  position: relative;
  height: 32px;
  width: 32px;
  margin: 30px;
}
.fall-coin {
  width: 100px;
  height: 100px;
  position: absolute;
  left: -60px;
  top: -80px;
  opacity: .1;
  transition: all .3s cubic-bezier(.87,-.41,.19,1.44);
}
.fall-coin-end {
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  opacity: 1;
}

JavaScript

document.querySelector('.like').addEventListener('click', function (e) {
  var coin = document.querySelector('.coin');
  var fallCoin = coin.cloneNode(true);
  var coinWrap = document.querySelector('.coin-wrap');
  var sound = new Audio("http://www.soundjay.com/misc/coin-drop-1.mp3");
 
  fallCoin.classList.add('fall-coin');
	coinWrap.appendChild(fallCoin);
  setTimeout(function () {
  	fallCoin.classList.add('fall-coin-end');
    sound.currentTime = 0;
    sound.play();
    setTimeout(function () {
    	coinWrap.removeChild(fallCoin);
    }, 300)
  })
})