2020年11月27日にコードの全面的な改変を行いました。以前のコードとの互換性はありませんので、再度以下の解説を確認してください。
縦長のペライチサイトが流行っていますが、最近ではスクロールに合わせてコンテンツが変化する「パララックス効果」のあるサイトも増えています。
「JS パララックス効果」で検索するといろいろなJavascriptが見つかるかと思いますが、シンプルに設置できるjQueryプラグインを書きましたので紹介します。
- デモ
- 設置方法
１．デモ
こんな感じでスクロールに合わせて表示されたり、移動したりするコンテンツを簡単に設置できます。
「上に戻るボタン」や「画面上に固定されるグローバルメニュー」などをスクロールに連動させて表示させたい場合にも使えるかと思います。
２．設置方法
手順１ 「parallax」ファイルのダウンロード
以下のリンクをクリックし「parallax」のスクリプトをダウンロードしてください。
「parallax」のダウンロード
手順２「parallax」ファイルの配置
ダウンロードした圧縮ファイルを展開し、「dist」フォルダ内の「parallax.js」ファイルをローカルサイトフォルダの「js」フォルダ内に配置してください。
手順３ スクリプト読み込みコードの記述
以下のコードをパララックス効果を設定したいページの<head>タグ内に記述してください。
(1) jQueryを読み込みます。
※すでにjQuery本体を読み込み済みの場合には、この作業は不要です。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>(2) 「parallax.js」ファイルを読み込みます。
<script src="js/parallax.js"></script>手順４ スクロール時アニメーションのタグ指定
スクロール時にアニメーションをしてほしいタグに「data-scroll-on」属性を追記します。
<section data-scroll-on>内容</section>手順５ スクロール前と後のCSSを用意
スクロール前とスクロール後のCSSを記述します。今回の例では、非表示になっているdiv要素を表示したいので、opacityプロパティを使います。
スクロール前
適宜デザインを入れたスタイルに追加で「opacity:0」を指定し透明にしておきます。
section {
opacity: 0;
}スクロール後
「.on」というクラス名を追加したセレクタを作り、「opacity:1」で表示します。
※間に半角スペースを入れない！
section.on {
opacity: 1;
}これで、スクロールに合わせて表示されるコンテンツが設置できます。
３．便利な使い方
「data-scroll-on」属性に数値を指定することでタイミングを微調整できます。
0.5を基準に好みで0.2（早めに変化）や0.7（遅めに変化）ぐらいを利用してみてください。※初期値は0.3
(1) 対象のコンテンツが画面中央に来たら変化（data-scroll-on=”0.5″）
<section data-scroll-on="0.5">内容</section>(2) 対象のコンテンツが画面に入った瞬間に変化（data-scroll-on=”0″）
<section data-scroll-on="0">内容</section>また、変化させたい要素に「～pxまでスクロールされたら変化して」という記述も可能です。
例として、クラス名で「circle」と名付けたdivを400pxスクロールした時点で表示する場合の記述を紹介します。
「400pxスクロールすると表示されるデモ」
対象のタグに「data-scroll-on」属性にスクロール量を指定します。
※pxの単位は必要ありません。
<section data-scroll-on="400">内容</section>４．様々な変化
このjQueryプラグインは、『指定したスクロール量に達すると、対象のタグにクラス名「.on」を追加する』だけのスクリプトです。
なので、「.on」を追加したセレクタに変化後のCSSを記述すればOKです。表示・非表示だけではなく、うまくスタイルを組めばサイズや色の変化、移動も可能です。
「様々に変化するデモ」
デモページを参考に、ぜひいろいろ試してみてください。