Blog

background-attachmentでパララックスもどきの動きをつけてみる

2013.12.17Cat:webデザイン デザイナー

パララックスのサイトが少し前に流行り、今ではいろんなサイトで見られるようになり一般的になってきたような感じがする昨今ですが、簡単にパララックスっぽい動きをつけられることを今更ながら発見しましたので、試してみました。
 
早速ですが、デモをご覧下さい。

 

DEMO

どうでしょうか?
パララックスっぽい感じがでてますでしょうか??

background-attachmentの実装

設定自体はとても簡単で、
背景画像を設定した箇所に、

と追加しているだけです。

要は、背景画像の位置を固定にしているため、
背景画像を設定した要素がスクロールで動いても、
背景画像は動かないため、このような見え方になっています。

ちなみに背景画像の位置は、ブラウザを起点に位置されます。

対応ブラウザはIE8からですので、
クライアント案件でも結構使えると思います。

なにより簡単にできるのでいいですね!写真とコンテンツの組み合わせ次第でいいサイトが出来上がるんではないでしょうか?

今度はもっと上級なパララックスも試してみたいと思います!

Author Profile

Y.A

アベと申します。
ディレクター兼デザイナー兼コーダーです。
まだまだ未熟者ですが、日々頑張っています。。。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ