Vanilla JS: Tạo sticker hoạt hình

https://viblo.asia/p/vanilla-js-tao-sticker-hoat-hinh-djeZ1wQJ5Wz

by trung ken

HTML

<h1>Animated sticker</h1> 
<div class="sticker"></div>

CSS

h1 {text-align: center;}
.sticker {
  width: 130px; height: 130px; margin: 0 auto;
  background: url(https://i.ibb.co/ZBZ7Qrx/Usagyuuun.png) no-repeat 0 0;
}

JavaScript

const layoutWidth = 2600
const layoutHeight = 130
const totalImages = 20
const imageWidth = layoutWidth / totalImages
const imageHeight = layoutHeight
let count = 1
let positionX = 0
const stickerElement = document.querySelector('.sticker')

setInterval(function() {
  positionX = -(imageWidth * count)
  stickerElement.style.backgroundPosition = `${positionX}px 0`
  count++
  count = (count >= totalImages) ? 0 : count
}, 1000 / totalImages)