シンプルな背景のパララックス効果を与える background-attachment: fixed; を使ったテクニック
PR
一枚ページのデザインや、ティザーサイトをつくるときに
パララックスの効果を与えるとウェブサイトは楽しくなってくるのですが
それを簡単に、シンプルに実現する方法です
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
短縮URL:
COMMENT