スクロールすると変化するコンテンツを設置する jQueryプラグイン「parallax」の紹介

縦長のペライチサイトが流行っていますが、最近ではスクロールに合わせてコンテンツが変化する「パララックス効果」のあるサイトも増えています。

「JS パララックス効果」で検索するといろいろなJavascriptが見つかるかと思いますが、シンプルに設置できるjQueryプラグインを書きましたので紹介します。

  1. デモ
  2. 設置方法

1.デモ

「parallax」デモページ

こんな感じでスクロールに合わせて表示されたり、移動したりするコンテンツを簡単に設置できます。

「上に戻るボタン」や「画面上に固定されるグローバルメニュー」などをスクロールに連動させて表示させたい場合にも使えるかと思います。

2.設置方法

手順1 「parallax」ファイルのダウンロード

以下のリンクをクリックし「parallax」のスクリプトをダウンロードしてください。
「parallax」のダウンロード

手順2「parallax」ファイルの配置

ダウンロードした圧縮ファイルを展開し、「js」フォルダのみをローカルサイトフォルダに配置してください。

手順3 スクリプト読み込みコードの記述

以下のコードをパララックス効果を設定したいページの<head>タグ内に記述してください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/parallax.js"></script>

手順5 タイミングの設定

変化させたい要素に「~pxまでスクロールされたら変化して」という記述を追加します。
例として、クラス名で「circle」と名付けたdivを400pxスクロールした時点で表示する場合の記述を紹介します。
「400pxスクロールすると表示されるデモ」

対象のタグに「data-scroll」属性でスクロール量を指定します。
※pxの単位は必要ありません。

<div class="circle" data-scroll="400">内容</div>

手順4 スクロール前と後のCSSを用意

スクロール前とスクロール後のCSSを記述します。今回の例では、非表示になっているdiv要素を表示したいので、opacityプロパティを使います。

スクロール前

適宜デザインを入れたスタイルに追加で「opacity:0」を指定し透明にしておきます。

.circle {
 /* なにかしらの記述 */
 opacity: 0;
}

スクロール後

「.on」というクラス名を追加したセレクタを作り、「opacity:1」で表示します。
※間に半角スペースを入れない!

.circle.on {
 opacity: 1;
}

これで、スクロールに合わせて表示されるコンテンツが設置できます。

3.便利な使い方

「○○pxスクロールされたら・・・」という設定ではなく「対象のコンテンツの位置までスクロールされたら」という設定も可能です。
「対象のコンテンツの位置までスクロールしたら変化するデモ」

その場合には、「data-scroll」属性の代わりに、「data-delay」属性で0から1までの数値を指定してください。数値でタイミングを微調整できますが、0.5を基準に好みで0.2(早めに変化)や0.7(遅めに変化)ぐらいを利用してみてください。

(1) 対象のコンテンツが画面中央に来たら変化(data-delay=”0.5″)

<div class="circle" data-delay="0.5">内容</div>

(2) 対象のコンテンツが画面に入った瞬間に変化(data-delay=”0″)

<div class="circle" data-delay="0">内容</div>

4.様々な変化

このjQueryプラグインは、『指定したスクロール量に達すると、対象のタグにクラス名「.on」を追加する』だけのスクリプトです。

なので、「.on」を追加したセレクタに変化後のCSSを記述すればOKです。表示・非表示だけではなく、うまくスタイルを組めばサイズや色の変化、移動も可能です。
「様々に変化するデモ」

デモページを参考に、ぜひいろいろ試してみてください。

コメントを残す

メールアドレスが公開されることはありません。