シンプルな背景のパララックス効果を与える background-attachment: fixed; を使ったテクニック

Parallax
このエントリーをはてなブックマークに追加
PR

一枚ページのデザインや、ティザーサイトをつくるときに
パララックスの効果を与えるとウェブサイトは楽しくなってくるのですが

それを簡単に、シンプルに実現する方法です

DEMO 表示

 

background-attachment: fixed; シンプルなパララックスにする

スクロールしても背景が固定されて表示される要素と、背景が固定されずにスクロールする要素を組み合わせてうまく表現します

今回は分かりやすいように要素の高さを100%にしています

 

パララックス効果を出すには、固定された背景の前後に固定されていない背景、もしくは背景が単色の無地なものを使うと効果的
(ウェブサイト表示と終わりのところは例外)

 

HTML

<body>
	<div class="block1"><h1>BLOCK ONE</h1></div>
	<div class="block2"><h1>BLOCK TWO</h1></div>
	<div class="block3"><h1>BLOCK THREE</h1></div>
	<div class="block4"><h1>BLOCK FOUR</h1></div>
	<div class="block1"><h1>BLOCK ONE</h1></div>
</body>

HTMLではこのようになっています、最後にもう一度block1を表示させています
(block1のところは背景をbody側で指定してしまっても有りです)

 

block1のCSS

.block1 {
	background: url("1.jpg") no-repeat center center;
	background-size: cover;
	background-attachment: fixed;
	width: 100%;
	height: 100%;
}

一番最初に表示されている要素の背景の指定で、画像を中央表示、さらに画像サイズに応じて縮小拡大をされるように background-positon: cover;をつけています

今回のキーの background-attachment: fixed;で背景を画面に対して固定しています

 

block2のCSS

.block2 {
	background: url("2.jpg") no-repeat center center;
	background-size: cover;
	width: 100%;
	height: 100%;
}

block2ではfixedの部分がなくなり、画像の指定が変わっているだけです

 

block3はblock1と同じで画像のURLのみ違います

block4はblock2の画像の部分を単色の背景にしただけです

 

 

ちょっとしたプラスアルファ

これにさらに背景の境界線をCSSでジグザグにしてみるとか するとよりパララックスの効果が期待出来るかと思います

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)