以前にスマホ対応！パララックスサイトの作り方という記事でパララックスを実装できる「ScrollTween.js」というライブラリを当サイトで紹介していますが、今回はRellax.JSというライブラリの使い方をサクッと紹介したいと思います。
Rellax.JSとは？
Rellax.JSは、jQueryに依存しないパララックスを実装できるためのJavaScriptライブラリです。 こちらからデモが見れます。 https://dixonandmoe.com/rellax/ Git Hub上の公式ページ。 https://github.com/dixonandmoe/rellax
Rellax.JSの導入
npmでのインストールはこちら。
|
1 2 3 |
[sourcecode lang="css"] npm install rellax --save [/sourcecode] |
直のファイルはこちらからコピーして利用します。 https://github.com/dixonandmoe/rellax/blob/master/rellax.min.js
基本的な使い方
ポイント①
「class=”rellax”」のようにクラス名を入力します。また、「data-rellax-speed=”-5″」のようにカスタムデータ属性を記述することでスクロールのスピードを設定することができます。スピードは「-10 から 10」までの間でスピードを指定することができます。
ポイント②
Rellax.JSファイルの読み込みとポイント①で指定したclassを指定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
[sourcecode lang="html"] <div class="bg"> <!-- ポイント① --> <h1 class="rellax" data-rellax-speed="-5">SONICMOOV</h1> <h2 class="rellax" data-rellax-speed="-2">App Development</h2> <h2 class="rellax" data-rellax-speed="1">UI / UX Design</h2> <h2 class="rellax" data-rellax-speed="4">Programming</h2> </div> <!-- ポイント② --> <script src="rellax.min.js"></script> <script> var rellax = new Rellax('.rellax'); </script> [/sourcecode] |
背景を視差スクロールする
下記のようにCSSに「background-attachment: fixed;」を指定すると背景そのものにもより視差スクロールを強調する設定にすることもできます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
[sourcecode lang="html"] <div class="bg rellax" data-rellax-speed="7"> <h1 class="rellax" data-rellax-speed="-5">SONICMOOV</h1> <h2 class="rellax" data-rellax-speed="-2">App Development</h2> <h2 class="rellax" data-rellax-speed="1">UI / UX Design</h2> <h2 class="rellax" data-rellax-speed="4">Programming</h2> </div> <script src="rellax.min.js"></script> <script> var rellax = new Rellax('.rellax'); </script> [/sourcecode] |
|
1 2 3 4 5 6 7 8 9 10 11 |
[sourcecode lang="css"] .bg { display: flex; justify-content: center; align-items: center; flex-direction: column; height: 800px; background-image: url('img/bg.jpg'); background-attachment: fixed; } [/sourcecode] |
Z-index
「data-rellax-zindex=”1″」のようにz-indexの重なり順を指定することもできます。
|
1 2 3 4 5 6 7 8 |
[sourcecode lang="html"] <div class="bg"> <h1 class="rellax" data-rellax-zindex="1">SONICMOOV</h1> <h2 class="rellax" data-rellax-speed="-2" data-rellax-zindex="2">App Development</h2> <h2 class="rellax" data-rellax-speed="1" data-rellax-zindex="3">UI / UX Design</h2> <h2 class="rellax" data-rellax-speed="4" data-rellax-zindex="4">Programming</h2> </div> [/sourcecode] |
要素の位置情報を取得
要素の位置情報を取得して処理をさせることもできます。
|
1 2 3 4 5 6 7 8 |
[sourcecode lang="html"] <div class="bg" data-rellax-speed="7"> <h1 class="rellax_postion" data-rellax-speed="-5">SONICMOOV</h1> <h2 class="rellax" data-rellax-speed="-2">App Development</h2> <h2 class="rellax" data-rellax-speed="1">UI / UX Design</h2> <h2 class="rellax" data-rellax-speed="4">Programming</h2> </div> [/sourcecode] |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
[sourcecode lang="javascript"] <script> // 要素の位置情報を取得 var rellax = new Rellax('.rellax_postion', { callback: function(positions) { // callback every position change console.log(positions); // 要素のY軸が-20より大きくなったら処理というサンプル if(positions.y > -20) { console.log("hoge = " + positions.y); } } }); </script> [/sourcecode] |
関連記事
