どうも、まさとらん（@0310lan）です。
みなさんは、自分のWebサイトに「パララックス効果」を取り入れたいと考えたことはありませんか？
「なんだか難しそう…」とか、「実装が面倒くさい…」のようなイメージをもし持っているのであれば、今回ご紹介するJavaScriptライブラリが一発解消してくれますよ！
【 Rellax.js 】
今回のテーマである「パララックス（視差効果）」がどんなモノであるかは、「Rellax.js」の公式サイトを見ると分かりやすいです。
このように画面を上下に動かす際に、複数のHTML要素が異なるスピードでアニメーションすることで、Webページが立体的になって印象に残りやすいサイトになります。
「Rellax.js」は、このような「パララックス効果」を可能な限り簡単に書けるようにしてくれるJavaScriptライブラリというわけです！（ちなみに、「ver1.0」からモバイルにも対応しました）
■必要なファイルを準備しよう！
それでは、早速「Rellax.js」を使って簡単なサンプルデモを作りたいので、まずは必要なファイルの確認をしておきましょう！
と、言っても必要なのは「rellax.js」ファイル1つだけです！
GitHubページからダウンロードしても良いし、CDN経由でHTMLに組み込んでも構いません。
<script src=”https://cdnjs.cloudflare.com/ajax/libs/rellax/1.0.0/rellax.min.js”></script>
そして、JavaScriptでゴリゴリとプログラミングを書いていくのかと思いきや、実はたった1行のコードを書くだけです！
var rellax = new Rellax(' .rellax ');
JavaScriptライブラリと言いつつも、実は「HTMLファイル」に記述する内容に秘密を持っているのが「Rellax.js」の面白いところなんです。
ただし、今は基本的な「HTMLファイル」の骨組みを先に作っておくことにします。
<!-- index.html --> <!doctype html> <html> <head> <meta charset="utf-8" /> <title>Rellax.jsのサンプルデモ</title> </head> <body> <script src=”js/rellax.min.js”></script> </body> </html>
ここまで来れば、「パララックス効果」を実現する準備は完了です！
早速サンプルデモを作っていきましょう！
■簡単な「パララックス効果」を作ってみよう！
まずは、簡単なサンプルデモとして、CSSで作った複数の「円」にパララックス効果を組み込んでみたいと思います！
今回作る「円」は4種類あり、「div要素」に「ball1」〜「ball4」というクラス名を付けてカタチを作っています。
div { position: relative; } .ball1 { width: 70%; padding-top: 70%; background-color: #0f0; opacity: 0.5; border-radius: 50%; top: -150px; left: 30%; } ・ ・ ・
「div要素」は「relative」にし、「top」「left」でそれぞれの「円」の配置を決めていきます。
そして、HTMLの記述はこんな感じになるでしょう。
<div class="rellax ball1"></div> <div class="rellax ball2"></div> <div class="rellax ball3"></div> <div class="rellax ball4"></div>
お気づきかもしれませんが、「rellax」というクラス名も一緒に記述しているわけですが、これを付けることによって「Rellax.js」側から自動的に「パララックス効果」を実現できるようにしてくれます。
ただし、このままではすべての「円」のアニメーション速度が同じなので、画面を上下に移動させても期待通りにはいきません。
そこで、HTMLの属性に「data-rellax-speed」を記述します。
<div class="rellax ball1" data-rellax-speed="-7"></div> <div class="rellax ball2" data-rellax-speed="0"></div> <div class="rellax ball3" data-rellax-speed="5"></div> <div class="rellax ball4" data-rellax-speed="10"></div>
「data-rellax-speed」には、「-10（遅い）」から「10（速い）」までの好きな数値を記述することが可能で、これによってバラバラの速度によるアニメーション移動が簡単に実現できるわけです！
この「サンプルデモ」の出力結果はこんな感じになります！
HTML要素に、チョコっと属性値を記述しただけで立派な「パララックス効果」を実現できているのが分かると思います。
このサンプルデモは、以下のリンクから実際に体験できます。
全ソースコードはコチラから閲覧できます。
■既存のWebサイトに「パララックス効果」を導入しよう！
さて、「Rellax.js」の概要をだいたい把握したところで、今度は既存のWebサイトに組み込んでいく方法を見ていきましょう！
今回は、Webサイトのサンプルとして、「Start Bootstrap」から好きなテンプレートを1つ選んで、それをベースに用意してみました。
これは、ごく普通の静的なWebサイトですが、「Rellax.js」を使って「テキスト」や「写真」に「パララックス効果」をつけてみましょう！
まずは、先ほどのサンプルと同じように、WebサイトのHTMLファイル内に「rellax.js」の本体ファイルと「new Rellax()」を記述します。
<script src="js/rellax.min.js"></script> <script> var rellax = new Rellax(' .rellax '); </script>
これで、導入準備は完了です！簡単ですね。
あとは、アニメーションさせたいHTML要素を選び、そこにクラス名「rellax」と属性の「data-rellax-speed」を追加するだけです！
アイコン、テキスト、写真…など、どれでも良いので好きなモノを選んで「rellax」を適用してみてください。
見事に「パララックス効果」を付与することが出来ます。
ただし、1つだけ注意点があります！
例えば、以下の「サンプルタイトル」というテキスト文字に「rellax.js」を適用したとします。
ところが、移動速度によっては画面をスクロールする途中で通り過ぎてしまい見づらくなります。
これではせっかくの「パララックス」も台無しですね。
理想としては、スクロールして画面の中央くらいで「サンプルタイトル」という文字が「本来の位置」に配置されていて欲しいところです。
そのために、速度を調整したり、CSSで配置を再指定したりなど、細かい調整をしていたのでは本末転倒ですよね…。
そこで、「Rellax.js」では便利なオプションが用意されています。
「new Rellax()」を実行する際に、以下のようなオプションを設定してみましょう！
<script> var rellax = new Rellax(' .rellax ', { // 中央寄せ center: true }); </script>
この「center: true」を記述するだけで、先ほどの「サンプルタイトル」というテキストが、ちょうど画面中央へ来るようにアニメーション移動されるのです！
分かりやすいように、オプション「center」を適用していない状態と、適用した状態のGIFを掲載しておくので、ぜひ見比べてみてください！
【オプションを適用していない状態（centerなし）】
【オプションを適用した状態（centerあり）】
GIFを見ると分かりやすいと思いますが、オプションを適用するとテキスト要素の「サンプルタイトル」という文字が、しっかりと画面中央にタイミング良く移動してくれるのが分かります。
このように、「Rellax.js」を活用すると、非常に簡単なコードで細かい調整まで可能な「パララックス効果」をすぐに導入できるようになります。
このサンプルサイトは、以下のリンクから実際に体験できます。
全ソースコードはコチラから閲覧できます。
■JavaScriptやHTML/CSS講座も公開中！動画でプログラミングが学べるレッスン
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数用意しております。
今回の記事で登場したJavaScriptやHTMLを学べる入門講座も好評公開中です。ぜひごらんください！
↓詳しくはこちら
■まとめ
駆け足で「Rellax.js」の使い方を見てきましたが、ポイントになるのは以下の3つだけです！
- 「new Rellax()」を記述する
- 好きなHTML要素の属性に「data-rellax-speed」を追記する
- 「中央寄せ」はオプション設定に「center:true」を記述する
この3つのポイントを覚えていれば、今すぐどんなWebサイトも「パララックス」を手軽に導入できるようになるでしょう。
ご興味ある方は、ぜひサンプルを確認しながら実際にトライしてみてください！
＜参考＞
paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。
自分のスキルを磨いていきたいという方におすすめなのが「paizaラーニング」。オンラインでプログラミングしながらスキルアップできる入門学習コンテンツです。初心者でも楽しくプログラミングの基本を学ぶことができます。
そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
