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

サイト制作
この記事は約4分で読めます。
スポンサーリンク

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

DEMO


歩く人

この「人が歩くアニメーション」ってjQueryも難しいけど、このパラパラ漫画素材を作るのが一番大変だよね。
僕が書いたヘンな絵だけど、利用する人がいるか、ちょっとわからない。
でも、サンプルとして使ってみてね!
画像をダウンロード
利用してる画像は全部で8枚で、反転した時はCSSで画像を反転してるだけなので
素材を作成する時もそんなに時間かからないはず!
僕も1人だけ下の絵を手書きで書いて、イラレで手足を動かして完成しました。
手書きイラスト
「人 歩く アニメ」とかでググって、人が歩く骨格画像を取ってきたら、イラレで下絵を元に「顔+体」と、「右腕・左腕(第一関節)」「右腕・左腕(第二関節+手)」、「右足・左足(第一関節)」、「右足・左足(第二関節+足)」ごとにレイヤーを作って、8個の骨格に合わせて手足の関節をクルクル回転させて画像を作成してきます。
8個できたら、横幅、縦幅を揃えて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の書き方がいまいち理解できなかったらリンク先に詳しく書いてあるから見てみてね!
以上でサイトにちょっと楽しいアクションを追加する方法のご紹介でした!

SNSフォローボタン
エンデ・バタローをフォローする
サイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

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