Bootstrapを使ってパララックス効果のあるページテンプレートを作成しました。
パララックス効果を利用したWEBデザインは2012年ごろからはやり始めて、2017年の現在では新鮮さが薄れてきているとは思いますが、今でもよく使われる手法です。
まずは、パララックス効果とは以下の意味です。
パララックスとは、視差効果のことです。 Webデザインにおけるパララックスはスクロールなどの動作に応じて、複数のレイヤー（層）にある要素を異なるスピードで動かすことで、「立体感や奥行きを演出」、「フェード・拡大縮小・回転などの視覚的エフェクト」を演出する手法を指します。
目次
出典：パララックス入門～スクロールで魅力あるWebサイトに～ | コラム | Web …
今回は、Bootstrapを用いてスマホ対応したレスポンシブのページをサンプルで作ってみました。
写真は以下のサイトからお借りしました。
背景写真１枚パターン
背景と本文エリアが違うレイヤー層にあるように見えるサンプルです。
背景写真は一枚でスクロールするごとにゆっくりと写真が上昇しているように見えます。
背景写真複数パターン
背景写真が複数あるパターンです。
背景写真を大きく見せられるので、写真を大きく見せたい場合に効果的です。
bootstrap carouselを用いたパターン
carouselを上部に加えたデザインです。
このように、bootstrapの既存JSと、パララックス効果を組み合わせれば、ダイナミックで動きのあるページもつくれることが出来ます。
参考になりましたでしょうか？
個人的にパララックス効果は写真を大きく見せる提案に向いている気がします。
是非お試し下さい。
