parallax効果でWEBサイトの演出向上

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

パララックスという言葉をご存知ですか?
 

「視差」という意味なのですが、WEBページにおいてスクロールのタイミングをずらして遠近感を出したりできる特殊効果で使います。
 

この効果を使うと、通常スクロールしていく下手なページに立体感を持たせる事ができ、リッチな感覚を与える事が可能になります。

やり方

スクロールの値を変更するには、javascriptを使ってonscrollイベント時に、スクロール値に従って、特定のエレメントの座標を変更する事で視覚効果を演出します。
 

今回はサンプルとして、「背景画像」の手前に3つのエレメントを配置し、一番手前は通行スクロール、二番目は、3分の1のスクロール座標値で移動、三番目は2分の1のスクロール座標値で移動、というプログラムを書いてみました。

ソースコード

解説

今回のサンプルページは、以下のようなエレメント構成になっています。
 

スクリーンショット 2018-02-05 17.07.04
 

ページ読み込み直後に、bg1~3はそれぞれ、中に丸いエレメントをランダム数分追加します。
 

そして、スクロールイベントのタイミングで、bg-1とbg-2の座標を変更しています。
 

ちなみに、ページのスクロール値は「document.body.scrollTop」で簡単に取得できます。

サンプル

スクリーンショット 2018-02-05 16.57.40
 

サンプルページ
 

いかがでしょう?こうした視覚効果を使って、面白いページを構築するイメージが湧きましたでしょうか?
 

デザイナーでなくても、こうしたページを構築できるようになると、仕事の幅も広がりますよね。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です