2019年12月4日

プログラミング

遠近感を味わえるマウスインタラクションを作ってみた!

目次

  1. はじめに
  2. 完成形を確認
  3. 実装に必要なものを整理
  4. いざ実装!
  5. まとめ

はじめに

新しい技術にチャレンジし続けるpalanのアドベントカレンダー Day4です!

昨日は「ステップバイステップ AWS Amplify GraphQL API」という記事でした。

ステップバイステップ AWS Amplify GraphQL API

本日は「遠近感を味わえるマウスインタラクションを作ってみた!」という記事を書いてきます!

ogp.png (129.7 kB)

完成形を確認

下記のようにマウスに合わせて遠近感を演出するインタラクションを作っていきます!

See the Pen
bagelee-01-mouseInteraction
by palan-sasai (@palan-sasai)
on CodePen.

このインタラクションの参考にしたサイトは下記の2つです!
Page not found · GitHub
オーバーウォッチ 2

実装に必要なものを整理

まずは完成形を見つつ実装に必要なものを整理していきましょう!

完成形のようにDOM操作を実装する際は、
必要な要素」と「必要な処理」の2つを整理すると
何を調べて実装を進めれば良いかの指針となりハマることが少なくなります!

それでは整理してみましょう!!

必要な処理 = いつ、なにを、どうするなど
(いつ) マウスが動いたときに
(なにを) 画像を
(どうする) マウスに連動させて動かす
(その他) レイヤーが上のものは大きく動き、レイヤーが下のものは小さく動く

必要な要素 = テキスト、画像、必要な処理に使用する値など
・画像
・画像の位置座標
・マウスの位置座標

ここまでできたら、実装に入っていきます!

いざ実装!

1. マークアップ

まずは、HTMLとCSSで要素を置いていきます。

See the Pen
bagelee-01-mouseInteraction_01
by palan-sasai (@palan-sasai)
on CodePen.

CSSで .main_list_item の初期位置を指定して、
最終的にJavaScriptでその中身のimg要素にスタイルとして transform: translate(●px, ●px); を指定し、移動させます。

2. DOM要素とその他情報を取得

つづいて、JavaScriptでDOM要素を取得します。

See the Pen
bagelee-01-mouseInteraction_02
by palan-sasai (@palan-sasai)
on CodePen.

参考

・JavaScript (Babel) 7行目
IEで NodeList を forEach するとエラーになる問題の対処方 – Qiita

3. 画像の位置座標を取得し配列へ格納

つづいて、JavaScriptで画像の位置座標を取得し配列へ格納します。

また、位置座標は -1.0 〜 1.0 の範囲になるように調整します。

位置座標を -1.0 〜 1.0 の範囲に調整する理由

  • なぜ調整するかというと…ウィンドウサイズに依存せず、値として扱いやすくするためです!
  • ここで取得する要素の位置座標、このあと取得するマウスの位置座標、
    これらの値にはウィンドウの左上から見てどれくらい離れているかという数値が入ります。
  • そのまま取得するとこのような値が入っています。
    x = 0.0 〜 ウィンドウの横幅
    y = 0.0 〜 ウィンドウの縦幅
  • このままコードを書いていくと
    ウィンドウサイズに依存した実装になりかねません。
  • では、このような値になるように調整してみましょう。
    x = 0.0 〜 1.0
    y = 0.0 〜 1.0

  • しかし、この値にも問題があります…!
    それは、ウィンドウの左上が原点ということ。
    ウィンドウの中央が原点である方が直感的に値を把握でき、扱いやすそうです!
  • 上記を踏まえ…
    最終的にこのような値になるよう調整します!
    x = -1.0 〜 1.0
    y = -1.0 〜 1.0

See the Pen
bagelee-01-mouseInteraction_03
by palan-sasai (@palan-sasai)
on CodePen.

参考

・JavaScript (Babel) 9行目
【JavaScript】桁指定して四捨五入・切り上げ・切り捨て

・JavaScript (Babel) 24, 25, 26行目
要素の位置座標を取得する方法

4. マウスの位置座標を取得

つづいて、JavaScriptでマウスの位置座標を取得します。

マウスの位置座標は mousemove イベントの中で取得できます。

See the Pen
bagelee-01-mouseInteraction_04
by palan-sasai (@palan-sasai)
on CodePen.

参考

・JavaScript (Babel) 44, 45行目
マウスカーソルの座標を取得 | JavaScript逆引き | Webサイト制作支援 | ShanaBrian Website

5. マウスを動かすたびに要素も移動

いよいよ画像を動かします!

See the Pen
bagelee-01-mouseInteraction_05
by palan-sasai (@palan-sasai)
on CodePen.

これで完成です!

まとめ

今回の完成形にリサイズ処理などを追加してクオリティを上げていけば、案件へ流用できるかもしれません…!
表現のストックの1つとしていかがでしょうか?

また、マウスの位置座標を取得していろんな値に変換できれば、表現の幅が広がること間違いなしです!
もっと素敵な表現があるので、活用事例からみるマウスインタラクション も是非参考にしてみてください!

0

0

AUTHOR

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

CONTACT PAGE TOP