• JOIN US ON SNS
  • 株式会社monomode
    私たちは札幌・東京を拠点に活動するシステム開発、WEB制作、ホームページ制作会社です。WEB制作やネットショップ制作を主軸にウェブ上のプロモーション展開をサポートしています。

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

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

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

 

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

 

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

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

 

今回つくるもの(仕様)

デモ

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

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

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

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

 

というものを作ります。

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

 

マウスの場所の検知方法

 

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

 

デモ1

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

HTML

 

JS

  • 1行目:bodyのマウスの動きを検知して、マウスが動くたびに以降のfunctionを実行
  • 2行目、3行目:マウスの位置のX軸、Y軸をそれぞれ取得
  • 4,5行目:②の値をそれぞれテキストに入れ込む

 

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

 

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

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

デモ2

JS

(html,cssは省略)
「var= ~」、という定義部分が増えましたが、基本的に変更したのは一か所で、デモ1の②部分にあたる5,6行目部分を「座標-ウィンドウサイズの2分の1」としました。

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

 

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

 

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

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

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

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

だけです。

HTML,CSS

JS

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

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

この記事が気に入ったら
いいね ! しよう

Twitter で
The following two tabs change content below.
トゥイスク 美雪

トゥイスク 美雪

フロントエンジニアのトゥイスクです。 名前の割に生粋の日本人です。 日々美味しい担々麺屋を探しています。

関連記事

  • RSS rss
  • feedly FEEDLY Feedlyで追加する
ページトップへ戻る