WebLoidWWebLoidWEBPSYCHOLOGYLIFEGAMECONTACTWWebLoidWEBPSYCHOLOGYLIFEGAMECONTACTWWebLoidTOPWEB背景をずらすパララックスのJavaScriptライブラリ「rellax.js」2019.05.14WEB背景をずらすパララックスのJavaScriptライブラリ「rellax.js」この記事の結論rellax.jsを使えば、簡単にパララックスを実現できるすぐ使いたい方は、公式ページへどうぞ使い過ぎは禁物、インパクトを与えたいときに使う(ブログには適さない)パララックス(parallax)とは今回は、他のホームページとデザインの差別化をしたいときに便利な、パララックスのJavaScriptライブラリを紹介します。パララックスとは「視差(視差効果)」とも言い、簡単に言うと動くスピードや動く方向などに差を付けることを指します。デモページを見ると一発で分かると思いますが、大きい丸い球はスクロールの際に速く動き、小さい丸い球はゆっくり動いているのが分かるかと思います。DEMOページパララックスを使うことによって奥行きが生まれ、表現の幅が広がります。昔から使われている表現方法ですが、案外使ったことのある人は少ないのではないでしょうか。今回紹介するrellax.jsを使えば、簡単にパララックスを導入することができるので是非使ってみてください。rellax.jsを実際に使ってみるまず、公式ページからgithubに飛び、zipファイルをダウンロードしましょう。公式ページzipファイルを解凍すると、「rellax.min.js」というファイルがあるので、これをjsフォルダなどの任意の場所に格納し、読み込みます。src="js/rellax.min.js"></script>次に、rellax.jsを適用させるclassを以下のうように記述します。.rellaxに当たる部分は任意の名称でかまいません。Rellax('.rellax');</script>読み込む順番に注意してください。Rellax('.rellax');を読み込まないと動作しません。ここまででJavaScriptに関する準備は完了です。あとは適用させたいhtml要素に.rellaxクラスを適用させるだけです。//この要素がパララックスとして適用される</div>他の要素よりも速く動いてほしいときはdata-rellax-speed属性を0以上にします。反対に他の要素よりも遅く動いてほしい場合はdata-rellax-speed属性を0以下にします。//この要素は他の要素より速く動きます。//この要素は他の要素より遅く動きます。</div>他にもいろいろオプションがあるので、公式ページで確認してみてください。僕が作ったデモページは以下になります。よければ参考にしてみてください。DEMOパララックスの使いどころを見極めるパララックスは印象的でオシャレに魅せるのに最適な表現だと思いますが、シンプルなウェブサイトと比べると目が疲れるのも事実です。ブログをメインとするサイトにパララックスは適していないでしょう。ブログは文章を読むことが目的であり、デザインを見に来ている訳ではないからです。対して、会社・商品の宣伝ページ、アーティストのページなど、インパクトを重視しているページに関しては効果的になります。普通のサイトにはない動きがあることで印象に残りやすいからです。(それでも、色んなところに使い過ぎているページは見てて疲れるというのが正直なところ...)ケースバイケースだとは思いますが、ユーザー目線に立って「本当に必要か?」ということを考えて利用するのが良いかと思います。サルワカさんのこちらのページでパララックスのサイトをまとめてくれていますので、ぜひ参考にしてみてください。インスピレーションが刺激されて良いアイデアが浮かんだりします。最新記事ゾッとする「ウミガメのスープ」の良問を3問、厳選しました。「ウミガメのスープ」の良問を3問、厳選しました。人気記事スクロールでふわっと現れるフェードインの動きをjQueryで実装ゾッとする「ウミガメのスープ」の良問を3問、厳選しました。「ウミガメのスープ」の良問を3問、厳選しました。する「ウミガメのスープ」の良問を3問、厳選しました。「ウミガメのスープ」の良問を3問、厳選しました。