【jQuery】パララックスデザインの作り方

何年か前からちょいちょい見かける「パララックスデザイン」のWebサイト、存在は知っていたのと、WordPressの海外製のテンプレート等で導入されたりしています。
どういった形で実装するのか興味がありましたので、これを機にチャレンジしてみたいと思います。

パララックスデザインとは

ブラウザーのスクロールにあわせて手前のコンテンツと背景を異なるスピードで動作させて奥行き感を出したり、スクロールすることで画面外からフェードインしたりフェードアウトしたりとWebサイトを華やかな演出で表現することが出来ます。

パララックスデザインのメリット・デメリット

当然メリット・デメリットを理解した上でお客様へ提案しなければいけませんので、私が考えるメリット・デメリットについて記述しておこうと思います。

パララックスデザインのメリット

• 動きのあるWebサイトの演出
• 1ページで複数のコンテンツを構成するのに有効（ランディングページなど）

パララックスデザインのデメリット

• 縦長のWebサイトになりがち
• 多くの画像や複数コンテンツを1ページに納めるためデータが重くなる

見せ方が華やかになる分、やはりデータが重くなり表示に時間がかかってしまうのではないかと思います。
そこはロードするタイミングの調整など別の部分で工夫をした方が良いかもしれません。
縦長のWebサイトになってしまう部分についても「ファーストビュー」が重要と言われる昨今、下の方まで見たくなるような演出を心がけないとですね。
通常のWebサイトのようにグローバルメニューを設置してページ内リンクでスクロールの演出を使うような工夫が良いでしょうか。

パララックスデザインに挑戦

恥ずかしながら手法が全くわかりませんので、偉大なる先人方の知恵を借りようと思います。
今回は「WEB DESIGN MAGAZINE」様の記事に沿って勉強させて頂きます。

参考サイト → パララックスサイトの基本的な作り方 1/2！

パララックスとは「視差効果」ということなのですね、なるほど勉強になります。

スクロールした値を取得

参考サイトに習ってHTMLとCSSとJSを設置していきます。
スクロールした値を使ってボックスの移動を行うようで、その数値を取得する必要があるそうです。

HTML

CSS

JS

ボックスを別々に動かす

各ボックスへ異なる数値を足してスクロールスピードを変えます。その数値に必要なのが上での「取得した数値」のようです。

HTML

CSS

JS

応用で上方向に移動するブロックを混ぜてみました

思ったより簡単だった（まとめ）

もっとゴテゴテしたscriptを複雑に使うのかなーと思っていたのですが、意外と簡単でした。

参考にさせて頂いたところのまんまのデモページが動いただけですが、「スクロール数値を取得してそれをどうにかすると出来る。」と言う基本がわかっていれば、縦方向だけでなく横方向、背景画像も挑戦して行けそうな気がします。
凝った演出をしようとするとそれ相応に手間が掛かりそうですが、「パララックスプラグイン」なるものもあるようなので工数を抑えて導入することも検討してみます。

工夫次第では「こんなWebサイト」も作れるようです。
背景の遅いスクロールの画像をぼやけさせる写真や動画のような演出がとても素晴らしいです。

また、既存のWebサイトの背景のスクロールを調整するだけでもちょっと違った演出が出来そうです。
今まで作ってきたWebサイトにも実装してみようかなと思いました。

「思ったより簡単だった」事を教えてくれ、わかりやすい手ほどきを公開してくださっている「WEB DESIGN MAGAZINE」様に御礼を申し上げるとともに、今回はこの辺にしたいと思います。
ありがとう御座いました。