[JQuery/CSS3]マウスの動きに合わせて動くコンテンツの作成：初級編

おひさしぶりです。トゥインドルです。

 

WEBサイトでは、いろいろなアニメーションや動きを実装することができますが、スクロールで画面が切り替わったりなど、インタラクティブなものがあると、コンテンツの質がぐっと上がったりすることがありますよね。

 

ということで、jQueryを使って３分で実装できる、マウスに合わせたコンテンツの動きを紹介します。

今回は、大きく「マウスの場所の検知の仕方」と「基本的な動きを実装する方法」に分けて紹介します（シリーズ化して、ちょっとずつレベルの高いものを作っていく予定ですが、とりあえず基本的なことだけという回にします）。

 

今回つくるもの（仕様）

デモ

・マウスが中央よりも左にいるか、右にいるかを検知してシーソーが角度を変える

→それに従って人の向きも変わる

・マウスが中央から遠くに行けば行くほどシーソーの角度が急になる

→それに従って、人のいる部分も変わる

 

というものを作ります。

※マウスの動きに対応する動きのデモなので、PCのみに対応しています。

 

マウスの場所の検知方法

 

jQueryを使っての実装なので、あらかじめjQuery本体を読み込んでください。

 

デモ１

まずは、マウスの場所の検知から。

HTML

<p><span>マウスX軸:</span><span id="clientX"></span></p>
 <p><span>マウスY軸:</span><span id="clientY"></span></p>

 

JS

  $('body').mousemove(function(e) {
        var cX = e.clientX;
        var cY = e.clientY;
        $('#clientX').text(cX);
        $('#clientY').text(cY);
    });

• 1行目：bodyのマウスの動きを検知して、マウスが動くたびに以降のfunctionを実行
• ２行目、３行目：マウスの位置のX軸、Y軸をそれぞれ取得
• ４，５行目：②の値をそれぞれテキストに入れ込む

 

これで、マウスの場所を取得することはできました。

 

真ん中からどれくらいの距離かを計測

今度は、画面の中央からの距離を計測します

デモ２

JS

var $window = $(window);
  var $winH = $window.height();
  var $winW = $window.width();
      $('body').mousemove(function(e) {
          var cX = (e.clientX - $winW / 2);
          var cY = (e.clientY - $winH / 2);
          $('#clientX').text(cX);
          $('#clientY').text(cY);
      });

（html,cssは省略)
「var= ～」、という定義部分が増えましたが、基本的に変更したのは一か所で、デモ１の②部分にあたる５，６行目部分を「座標－ウィンドウサイズの２分の１」としました。

これによって中央からの差し引きの値となり、マウスが画面の左にあるとき＝Xは負の値、右にあるとき＝Xは正の値となります（Y軸の値も同様）。

 

これで、マウスが真ん中からどれくらい離れているかが計測できました。

 

マウスの動きに従って動くコンテンツをつくる

（これからは、内容を簡略化するために、X軸のみの動きを追いかけることにします。）

コンテンツの動きを足す作業は、

JSでマウスの動きを検知する→CSSのtransformをつかって動かす

だけです。

HTML,CSS

  <style media="screen">
 * {
 padding: 0;
 margin: 0;
 }
 body {
 width: 100vw;
 height: 100vh;
 position: relative;
 }
 .island__wrapper {
 position: absolute;
 top: 50%;
 left: 50%;
 margin-left: -250px;
 margin-top: -25px;
 transition: transform .4s;
 }
 .island {
 width: 600px;
 height: 50px;
 overflow: hidden;
 }
 .island::after {
 content: "";
 display: block;
 width: 600px;
 height: 100px;
 border-radius: 1000px;
 background-color: green;
 }
 .hito {
 position: absolute;
 top: -170px;
 left: 250px;
 transition: transform 1s;
 }
 .hito img {
 width: 100px;
 height: auto;
 }
 </style>
 <div id="canvas">
 <div class="island__wrapper"><div class="island"></div><div class="hito"><img src="left.gif" alt="" width="550" height="922"></div></div>
 </div>

JS

var $window = $(window);
  var $winW = $window.width();
  var $winCeneter = $winW / 2;//windowのX軸の中央の値を取得
  var hito = $('.hito');
  var hitoImg = $('.hito img');
      $('body').mousemove(function(e) {
          var cX = (e.clientX - $winCeneter);//X軸中央値からの差
          var rX = cX * 0.03 + "deg";//cXの値に応じてシーソーの傾き度合いを変える（0.03は適当。この値が大きければ大きいほど角度が急になる）
          var sX = Math.abs(cX) / $winCeneter;//中央からの値の割合（cXの絶対値/中央値).端っこに行けば行くほど1に近づき、中央に行けば行くほど0に近づく。
          $('.island__wrapper').css({'transform': 'rotate('+ rX + ')'});//シーソーの角度をtransformでつける
          if(cX > 0) {
            //cXが正の値になったときの動作
            hitoImg.attr('src','left.gif');//人が左を向くgifに切替
            hito.css({'transform': 'translateX('+ 220*sX + 'px)'});//translateXで「最大値220px＊傾きの割合」移動させる
          } else {
            //cXが負の値になったときの動作
            hitoImg.attr('src','right.gif');//人が右を向くgifに切替
            hito.css({'transform': 'translateX(-'+ 220*sX + 'px)'});//translateXで「最大値220px＊傾きの割合」マイナスに移動させる
          }
      });

Transformにtransitionをかけると、ちょっとだけマウスとの動きとの時間差が生まれて、

マウスとの連動があまりにもグイングインしない感じになります。