parallax

簡単!Bootstrapを使ったパララックス(parallax)効果テンプレートの紹介(スマホレスポンシブ対応)

Bootstrapを使ってパララックス効果のあるページテンプレートを作成しました。
パララックス効果を利用したWEBデザインは2012年ごろからはやり始めて、2017年の現在では新鮮さが薄れてきているとは思いますが、今でもよく使われる手法です。
まずは、パララックス効果とは以下の意味です。

パララックスとは、視差効果のことです。 Webデザインにおけるパララックスはスクロールなどの動作に応じて、複数のレイヤー(層)にある要素を異なるスピードで動かすことで、「立体感や奥行きを演出」、「フェード・拡大縮小・回転などの視覚的エフェクト」を演出する手法を指します。

出典:パララックス入門~スクロールで魅力あるWebサイトに~ | コラム | Web …

 

今回は、Bootstrapを用いてスマホ対応したレスポンシブのページをサンプルで作ってみました。
写真は以下のサイトからお借りしました。

京都フリー写真素材


背景写真1枚パターン

背景と本文エリアが違うレイヤー層にあるように見えるサンプルです。
背景写真は一枚でスクロールするごとにゆっくりと写真が上昇しているように見えます。

⇒ライトプラン 詳細はこちら ライトプラン 詳細はこちら

⇒サンプル確認はこちら

bootstrapパララックス効果


背景写真複数パターン

背景写真が複数あるパターンです。

背景写真を大きく見せられるので、写真を大きく見せたい場合に効果的です。

⇒ライトプラン 詳細はこちら ライトプラン 詳細はこちら

⇒サンプル確認はこちら

bootstrapパララックス効果


bootstrap carouselを用いたパターン

carouselを上部に加えたデザインです。
このように、bootstrapの既存JSと、パララックス効果を組み合わせれば、ダイナミックで動きのあるページもつくれることが出来ます。

⇒ライトプラン 詳細はこちら ライトプラン 詳細はこちら

⇒サンプル確認はこちら


参考になりましたでしょうか?

個人的にパララックス効果は写真を大きく見せる提案に向いている気がします。

是非お試し下さい。

投稿者:

kishiken

企業務めのWEBデザイナーです。