background-attachmentでパララックスもどきの動きをつけてみる
パララックスのサイトが少し前に流行り、今ではいろんなサイトで見られるようになり一般的になってきたような感じがする昨今ですが、簡単にパララックスっぽい動きをつけられることを今更ながら発見しましたので、試してみました。
早速ですが、デモをご覧下さい。
どうでしょうか?
パララックスっぽい感じがでてますでしょうか??
background-attachmentの実装
設定自体はとても簡単で、
背景画像を設定した箇所に、
1 | background-attachment: fixed; |
と追加しているだけです。
要は、背景画像の位置を固定にしているため、
背景画像を設定した要素がスクロールで動いても、
背景画像は動かないため、このような見え方になっています。
ちなみに背景画像の位置は、ブラウザを起点に位置されます。
対応ブラウザはIE8からですので、
クライアント案件でも結構使えると思います。
なにより簡単にできるのでいいですね!写真とコンテンツの組み合わせ次第でいいサイトが出来上がるんではないでしょうか?
今度はもっと上級なパララックスも試してみたいと思います!
Author Profile
スターフィールド編集部
SHARE