WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

jQueryでパラパラアニメーション

f:id:mmmmofu:20170519001447p:plain

デモ
http://efu.sakura.ne.jp/web/flip/

画像1枚ずつ横に動かしてアニメーションさせる

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>パラパラアニメーション</title>
  <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css">
  <link rel="stylesheet" href="css/style.css">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="js/script.js"></script>
</head>
<body>
  <div class="flip_wrap">
    <ul class="fliplist"></ul>
  </div>
</body>
</html>
.flip_wrap {
  width: 700px;
  margin: 50px auto;
  overflow: hidden;
}

.fliplist li {
  float: left;
}
$(function(){
  var imgNum = 49;
  var imgW = 700;
  var movieTimer = '';
  for(var i=1; i<=49; i++) {
    $('.fliplist').append('<li><img src="img/' + i + '.png" alt=""></li>');
  };
  $('.fliplist').css({'width': imgW*imgNum});

  clearTimeout(movieTimer);
  var move = imgW * -1;
  var anime = function() {
    $('.fliplist').css({'margin-left': move });
    move = move - imgW;
    console.log();
    if(move <= imgW * imgNum * -1) {
      move = 0;
    }
    movieTimer = setTimeout(anime, 30);
  };
  anime();
});

mp4をgifに変換
gifs.com