はてなブログで「パララックススクロール」を実現する

パララックス（視差）スクロール

　ここのところiOSのホーム画面やWebデザインにおいて、「パララックススクロール」が流行っています。「パララックス」とは「視差」の事で、要するに言えば背景と文章コンテナを多重スクロールさせる事でコンテンツに奥行き感を出すような手法です。

　これ自体は趣味の範囲ですが、下記サイトにおいて「気が散るのを防ぎながら背景を魅せる効果がある」と指摘していて「確かに」と思いました。僕も背景がガンガンスクロールするのが苦手で固定背景にしてしまう事が多いのですが、それはそれで味気なさを感じる事もあります。

ざっくりと言えば背景画像だけゆっくり動かせています。（背景画像にとどまらず、スクロールに合わせて早くしたり、横に動かしたりと使い方の幅はあるよね。）

上に書いた動く場合のデメリットである「気が散る」をあまり感じさせないようにしつつ、背景も魅せることを可能にしています。

See the Pen Parallax scrolling background by Sander (@skeurentjes) on CodePen.

　上記コードを元にはてなブログから簡単に利用できるように実装してみました。

https://vine.co/v/O1MB21MAJIj

設置方法　

　ブログデザイン内のフッターに以下のスクリプトを配置。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://bulldra.github.io/parallax.js" charset="utf-8"></script>

　デザインCSSに以下の記述を追加(「backrougnd」がはてなブログ内で使用されていたため修正)。

.background-parallax { 
  background-image: url('背景画像URL');
  background-color: transparent; 
  background-repeat: repeat;
  position: fixed;
  width: 100%;
  height: 300%;
  top: 0;
  left: 0;
  z-index: -1;
}

まとめ

　そんなわけで、背景の固定／スクロールに続く「第三の選択肢*1」として、パララックススクロールの利用を検討してはいかがでしょうか。ここ最近は、この辺りのデザインについてなんとなく勉強していたりします。なお、設置サポートや表示スタイル／アルゴリズムのカスタマイズ等のご依頼がありましたらサポートライセンスの購入をお願いいたします。

現場のプロが教えるWebデザイン&レイアウトの最新常識 知らないと困るWebデザインの新ルール3

*1:サードスクロール