視差効果をJavaScriptで取り入れる

自身の学習用まとめ。脳内アップデート時にこちらも更新していきたい。

⑴ファイルをダウンロード

Rellax.jsのファイルをダウンロードする。
ファイル自体ををダウンロードするこの方法だとオフラインでも問題なく動作する。

①GitHubのRellax.jsのページからファイルをダウンロード。
「Code」→「Download ZIP」を選択

②ZIPファイルを解凍
rellax.jsとrellax.min.jsのどちらかを利用
rellax.min.jsはファイルサイズが小さい。通常はminを利用

③rellax.min.jsまたはrellax.jpをフォルダ内の任意の場所に保存
作成中のHTMLのあるフォルダにjsフォルダを作りその中に保存すると良い

④HTMLで読み込み
パスは保存したフォルダを指定

<script src="○○/rellax.js"></script> 

/* ○○は保存先のフォルダ名。
rellax.jsまたはrellax.min.js
必要に応じて./等つける */

これで、ダウンロードしたファイルからrellax.js（またはrellax.min.js）を読み込むことができる。
記載する場所は</body>直前がベター

(2)HTMLにマークアップ

視差効果をつけたい要素に下記を記述。

・視差効果を出す箇所のクラス名（ここでは.rellax）
・data-rellax-speed（スクロール速度） や　data-rellax-zindex（ 重なり順 ）やdata-rellax-percentage（ 要素の位置 ）など　＊必須ではない

<div class="rellax" data-rellax-speed="-2">
  
</div>

data-rellax-speed

　・-10から10までの整数を指定
　・正→スクロールと同じ方向
　・負→スクロールと反対方向
　・数値が大きくするほど速い
　・0は視差効果なし

data-rellax-zindex

　・値が大きいほど上に重なる

data-rellax-percentage

　・%で設定（単位は省略して書く）
　・正→上方向
　・負→下方向
　・0.5でセンタリング

（３）JavaScriptの初期化

（１）で指定したパスより下に記述

<script src="○○/rellax.js"></script> 　//（１）で指定したパス

<script>　//初期化コード
  var rellax = new Rellax('.rellax');　//.rellaxは(2)で指定したクラス名
</script>

☆　この（１）〜（３）を行うことで視差効果を追加することができる。

<<レスポンシブ対応>>

ブレイクポイントの初期値は[576, 768, 1201]
この初期値をもとに（２）でマークアップしたHTMLの要素に追加して書いていく。

<div class="rellax"　　　　　　　　
//ここから下を追加
data-rellax-speed="2"　　　　　　　//基本の速度
data-rellax-xs-speed="2"　　　　　//モバイル      575以下
data-rellax-mobile-speed="2"　　 //スマホ       576〜767
data-rellax-tablet-speed="2"　　 //タブレット    768〜1200
data-rellax-desktop-speed="0">　 //デスクトップ　1201以上
 
</div>

上記コードは、デスクトップ以外に視差効果を設定。