こんにちは みなさんお元気でしょうか
気温も暖かくなり、桜とパララックスが綺麗な季節になってきましたね。
ということで今回はマウスに応じて動くパララックスの実装で優勝…
解説していこうと思います。
※実装イメージ
実装サンプルはこちら
こんな感じでマウスに応じて背景が動くやつありますよね。
実装する際に色々なプラグインを試したりしましたが、
どれも動作が重たかったりファイルサイズが気になりましたので
今回は自分で実装することにしました。
簡易的にまとめたものですが紹介します。
簡易版のデモ
See the Pen
mouse_parallax by field kitamura (@fieldkitamura)
on CodePen.
わかりやすいように パララックスさせる要素の色とサイズをバラバラに設定しています。実際に使用する場合は任意の画像やスタイルを設定してください。
今回は目印のためにオクトキャットちゃんに登場してもらいました。こちらもご自由に。
全体の処理としては マウスの位置と起点となる位置を計算してパララックスさせたい要素にstyleを付与するといった処理になります。
アニメーションはあえてCSSで処理しています。その方が動作が軽いと感じたためです。（tweenmaxなどライブラリーを使用する場合はそちらでも問題ないと思います！）
1. HTMLの記述
<div class="pararaxArea" id="js-parallaxArea"> <div class="js-parallax pararaxItem"></div> <div class="js-parallax pararaxItem"></div> <div class="js-parallax pararaxItem"></div> <div class="centerObj"><img src="https://www.fieldcorp.jp/wp-content/uploads/2021/04/octocat.png" alt="" decoding="async"/> </div> </div>
まずはパララックスさせるエリアに#js-parallaxAreaとidを指定してください。
そして、パララックスさせたい要素に.js-parallaxとクラスを指定してください。
残りのクラスはCSS用に.pararaxArea、.pararaxItemと指定してください。
この辺りはご自由にクラスをつけてください。
3. CSSの記述
.pararaxArea {
position: relative;
background-color: #f8f8f8;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
.pararaxItem {
position: absolute;
opacity: .5;
&:nth-child(1) {
width: 300px;
height: 300px;
background-color: rgba(104, 152, 208, 0.85);
transition: transform .6s linear .008s;
}
&:nth-child(2) {
width: 270px;
height: 270px;
background-color: rgba(114, 188, 201, 0.71);
transition: transform .5s linear .004s;
}
&:nth-child(3) {
width: 240px;
height: 240px;
background-color: rgba(#4cc5f9, 0.68);
transition: transform .3s linear 0s;
}
}
.centerObj {
position: absolute;
z-index: 100;
width: 80px;
height: 80px;
img {
width: 100%;
}
}
}
.parallaxAreaにはアクティブにしたい範囲を任意で大きさを指定してください。
.pararaxItemは今回は起点がセンターなので真ん中に来るように調整しています。
ポイントは CSSでアニメーションの調整をしているので
.pararaxItemへtransitionの指定を任意で指定してください。
4. JavaScriptの記述
// パララックスのターゲット取得
const target = document.getElementsByClassName('js-parallax');
// パララックスを行うエリア
const activeArea = document.getElementById('js-parallaxArea');
// ウィンドウの中心の取得
const xCenter = window.innerWidth / 2;
const yCenter = window.innerHeight / 2;
// パララックスで移動させる距離
const parallaxVal = 10; //中心からマウスの距離の10分１移動
// マウスがパララックスエリアに入った時のイベント
activeArea.addEventListener('mousemove', (e) => {
// マウスの座標を取得して 中心からの距離取得、 そこからpararaxValで距離を調整
const x = (xCenter - e.pageX) / parallaxVal;
const y = (yCenter - e.pageY) / parallaxVal;
// パララックスさせる要素にstyleの指定
for (var i = 0; i < target.length; i++) {
target[i].style.transform = `translate(${-x}px, ${-y}px)`;
}
});
まずは.js-parallaxと#js-parallaxAreaを取得して変数に格納します。
そしてxCenter,yCenterに今回の起点になるwindowの中心を取得しておきます。
pararaxValにはパララックスさせる量を設定します。
今回は中心からマウスの距離の10分の１の距離をパララックスさせるので10を設定しています。こちらは任意で調整してください。
そしてaddEventListenerでactiveAreaにマウスが入った時のイベントの処理を書いていきます。
マウスの座標を取得して、それぞれ中心からの距離を計算してpararaxValで割ります。
計算された値をtargetにstyleとして付与していきます。
これでjsの処理は完了です。
あとはCSS側でtransitionの調整を各要素ごとに調整すれば完成です。
5. まとめ
いかがでしたでしょうか
今回はプラグインを使わず実装してみました。
やってみると意外と簡単に実装できて動作も比較的に軽いかと思います…！
自分で作ってみると仕組みを理解できたり、拡張していくこともできますので
是非やってみてください！
それでは
