【jQuery】カーソルで動く！人が歩くアニメ｜コピペですぐ実行

2021年09月27日
この記事は約4分で読めます。

カーソルに追随して動くアニメーションって楽しいよね♪
カーソルで動く要素がサイトに有ると、ついつい右行ったり～左行ったり～しばらく繰り返しちゃう。
そんなアニメーションを実現するjQueryのご紹介。
画像をダウンロードして、すべてコピペすればDEMOと同じ動きができるよ！

DEMO

歩く人

この「人が歩くアニメーション」ってjQueryも難しいけど、このパラパラ漫画素材を作るのが一番大変だよね。
僕が書いたヘンな絵だけど、利用する人がいるか、ちょっとわからない。
でも、サンプルとして使ってみてね！
画像をダウンロード
利用してる画像は全部で８枚で、反転した時はCSSで画像を反転してるだけなので
素材を作成する時もそんなに時間かからないはず！
僕も１人だけ下の絵を手書きで書いて、イラレで手足を動かして完成しました。
手書きイラスト
「人　歩く　アニメ」とかでググって、人が歩く骨格画像を取ってきたら、イラレで下絵を元に「顔＋体」と、「右腕・左腕（第一関節）」「右腕・左腕（第二関節＋手）」、「右足・左足（第一関節）」、「右足・左足（第二関節＋足）」ごとにレイヤーを作って、８個の骨格に合わせて手足の関節をクルクル回転させて画像を作成してきます。
８個できたら、横幅、縦幅を揃えてpng画像に書き出して素材完成！
次はコーディングです！

HTML

<div class="demo">
  <span></span>
  <img src="img/img_1.png" alt="歩く人" />
</div>

CSS

.demo {
  position: relative;
  width: 76%;
  height: 500px;
  display: block;
  margin: 0 auto;
  border: 2px solid #3e3e3e;
  border-radius: 12px;
}
.demo span {
  position: absolute;
  bottom: -13%;
  left: 50%;
  transform: translateX(-50%);
  width: 27%;
  height: 20px;
  display: block;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
}
.demo img {
  position: absolute;
  bottom: -14%;
  left: 50%;
  transform: translateX(-50%);
  width: 32%;
}

jQuery

$(function() {
  var width = $(window).width();
  $(".demo").css({height: width / 2.5});
  $(window).on("resize", function() {
    width = $(window).width();
    $(".demo").css({height: width / 2.5});
  });
  var num = 0;
  var img = $(".demo img");
  var max = 8;
  var speed = 150;
  // 歩いているアニメ
  setInterval(function() {
    num++
    img.attr({src: 'img/' + num + '.png'});
    if(num == max) {num = 0;}
  }, speed);
  
  // カーソルで移動
  var len = 0;
  $(window).on('mousemove', function(e) {
    width = $(window).width();
    if(e.clientX / width * 100 < len ){
      // 体の向きを左へ
      img.css({transform: "translateX(-50%) scale(-1, 1)"});
    }else{
      // 体の向きを右へ
      img.css({transform: "translateX(-50%)"});
    }
    len = e.clientX / width * 100;
    if(len <= 100 && len >= 0) {
      // 0% ~ 100%までは移動可能
      $(".demo span, .demo img").css({left: len + "%"});
    }
  });
});

全てをコピーして作ると同じ動きになるはずです。
歩いているアニメの作成は前に書いた記事を参考にして、カーソルの取得も
これまた、前に書いた記事を参考にしてjQueryを書いています。
体の向きの判定はスクロールの上下方向を検知・判定するで書いた方法をカーソルの向きに応用して作成しています。
jQueryの書き方がいまいち理解できなかったらリンク先に詳しく書いてあるから見てみてね！
以上でサイトにちょっと楽しいアクションを追加する方法のご紹介でした！

コメント

タイトルとURLをコピーしました