テキストも画像もパララックスできるプラグイン今回はテキストも画像もパララックスできるRellax.jsの使い方を紹介します。jQueryに依存しないで使えるプラグインですが、今回はjQueryを使用して説明します。デモサイトを作ったので動作を確認しましょう。以前に紹介したパララックスできるプラグインのparallax.jsは画像に特化したプラグインです。テキストはパララックスできません。背景の画像をずらすことでパララックスさせています。Rellax.jsはスクロールに応じて、テキストや画像の位置を移動させることでパララックスさせています。両者の違いはデモサイトで確認してもらえるとわかりやすいでしょう。・parallax.jsのデモサイト・Rellax.jsのデモサイトそれではRellax.jsの使い方を説明していきます。Rellax.jsをダウンロードするまずはRellax.jsをgithubからダウンロードしましょう。・github(Rellax.jsをダウンロード)フォルダを解凍して「rellax.min.js」をご自身の環境にアップロードしてください。アップロードできたらファイルを読み込みます。読み込むパスはご自身の環境に合わせて変更します。src="path/to/rellax.min.js"></script>githubからダウンロードをするのが手間であればCDNも用意されています。以下のように書けばダウンロードせずにRellax.jsを使うことができます。src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.9.1/rellax.min.js"></script>jQueryに書くことメモ帳などでinit.jsと作成して以下のよう書きましょう。クラス名がrellax-targetとついているものにパララックス効果をつけるようにします。//クラス名rellax-targetにパララックス効果});作成したinit.jsを読み込みます。先ほど読み込んだものと合わせると以下のようになります。src="path/to/init.js"></script>HTMLに書くことパララックスさせたい箇所にクラス名rellax-targetをつけることが条件です。あとはdate属性でパララックスさせる方向やスピード、重なりを指定すれば終了です。data-rellax-zindex="2">テストです</p></div>data-rellax-speed数値がを-10〜10から選べます。プラスは下スクロールすると上へ、マイナスは下スクロールすると下へ移動します。数値が大きいほどパララックス効果が強くなります。data-rellax-zindexテキストや画像の重なる順番を数値で決めます。数字が大きいと上に重なります。data-rellax-percentage上下のどの位置にセットするか決めます。マイナスで下へ、プラスで上に配置します。スクロールを開始すると、パララックスを指定した要素はいっせいに動き出します。下にスクロースすればするほど、下にある要素は見えたい位置からズレてきてしまうので、ここで位置を調整する必要があります。(ここではなく、cssで調整してもOK)スマホ表示も考えた実装方法とは?スマホでは画面サイズが変わるため、パソコンではうまく見えていたものが、スマホで位置がズレていたり、パララックスのスピードが早くなってしまうことがあります。この場合の実装方法は以下の2つがあります。1スマホでも数値を調整して、パララックスさせたい2スマホ表示ではパララックスさせないそれぞれ説明していきます。スマホでも数値を調整して、パララックスさせる数値の変更ができるようにスピードはjQueryで、位置はCSSで調整します。jQueryに書くこと画面サイズを判定して、スマホ表示のときはパララックスのスピードを遅くします。}});HTMLに書くことdate属性で書くのは重なり順を決めるdata-rellax-zindexだけにします。data-rellax-zindex="2">テストです</p></div>CSSに書くことmediaクエリを使ってブレイクポイントごとに上下の位置をmarginやpadding、またはpositonを使って決めていきます。レイアウトによっては1つ1つ調整していくので時間と手間がかかります。次にパソコン表示だけパララックスさせる方法です。スマホ・タブレット表示のときだけrellax.jsを読み込ませないようにすれば実現できます。スマホ表示ではパララックスさせないスマホ表示の判定を画面サイズでしてもいいですが、今回はユーザーエージェントで判定して、スマホやタブレットで表示されたときはrellax.jsを読み込ませないようにします。});}HTMLで書くことスマホやタブレットでパララックスさせないのであれば、パソコン表示ではdata-rellax-percentageを使って上下の位置を調整します。rellax.jsが読み込まれなければ自然と元の位置に戻るため余計にCSSを書く必要がないからです。data-rellax-zindex="2">テストです</p></div>Windowsで見たときのガタつきを解消するには?Macで見るパララックスはスクロールに余韻(慣性スクロール)があるためとても自然ですが、Windowsの場合はスクロールした分しか進まないためパララックスがガタつく場合があります。このガタつきを解消ためには、Macと同じようにマウススクロールに余韻をつけてあげることです。以前の記事でやり方を説明しているので参考にしてみてください。