JSFiddle - React, Tailwind, and code Playground

by moongtook

HTML

<h3>
<strong>스토리보드 이미지</strong>를 가지고 Gif 애니메이션을 흉내내기
</h3>

<h4>
스토리보드 이미지
</h4>
<img src="https://i.ytimg.com/sb/P8_orZn51RI/storyboard3_L2/M0.jpg?sigh=fpDNk7YvqyHv3I6ICjM73hnkvZI" />
<br/>
<a href="https://www.youtube.com/watch?v=P8_orZn51RI">https://www.youtube.com/watch?v=P8_orZn51RI</a>

<h4>
데모!
</h4>
<div id="it"></div>
<br/>
마우스를 위 썸네일에 갖다 대면, 플레이~

JavaScript

var url = 'https://i.ytimg.com/sb/P8_orZn51RI/storyboard3_L2/M0.jpg?sigh=fpDNk7YvqyHv3I6ICjM73hnkvZI'
var n = 5
var w = 800 / n
var h = 450 / n


init();
  
$("#it").mouseover(function() {
	play();
})

function init() {
  $("#it").css({
      width: w +"px",
      height: h +"px",
      "background-image": 'url("'+ url + '")',
      "background-repeat": "no-repeat",
      "background-position-x": "0px",
      "background-position-y": "0px"
  })
}

function play() {
	init()
  var prevX = "0px"
  var prevY = "0px"
  for (row = 0; row < n; row++) {
    for (col = 0; col < n; col++) {
      var curX = (-1*w*col) + "px"
      var curY = (-1*h*row) + "px"
      console.log('background-position:', curX, curY)
      $("#it").css({
        'background-position-x': prevX,
        'background-position-y': prevY
      }).animate({
        'background-position-x': curX,
        'background-position-y': curY
       }, 0).delay(400);
    }
  }
}