たった数行でパララックス(視差効果)を実装する方法【jQuery】

2012年7月22日 2018年8月30日 WEB

WEBページの表現方法のひとつ「パララックス」の実装方法を紹介。

  • コンテンツのボリュームがそれほど多くない。
  • シンプルに実装したい

そんな人向けの内容となっています。

パララックスとは?

スクロールすると、背景や画像・テキストが時間差で移動して見える事で起きる「視差効果」による奥行きを表現するテクニックです。

これが実にシンプルに実装できてしまうんですね。

ここでは、比較的かんたんにパララックスが演出できるかなりシンプルなコードを紹介します。

 

デモ

パララックスのサンプルコード

HTML

CSS

JS

コメント

お気軽にコメントをどうぞ。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

ウェルスナビで損失?