サイトを作っているとスクロールした時に背景画像などを固定させておきたい、パララックス効果を使いたいという時があると思います。
簡単なものであれば簡単なcssで実現できます。
背景画像をパララックス効果で見せる
DEMO
See the Pen
Untitled by kkdd (@kk8kk)
on CodePen.
なんとなくよく見る感じの表示になっていると思います。
HTMLとcssの方を解説していきましょう。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<secton id="wrapper"> <div class="mainVisual"></div> <div id="mainTitle" class="items"> <h1>メインビジュアル</h1> </div> <div id="c01" class="items"> <p>コンテンツ1</p> </div> <div id="c02" class="items"> <p>コンテンツ2</p> </div> <div id="c03" class="items"> <p>コンテンツ3</p> </div> </section> |
HTMLの方では上部に背景画像を置くエリア『.mainVisual』を置いています。
次に背景の画像と合わせてメインビジュアルのように表示したいテキストの領域『.mainTitle』を置いています。
スクロールした時に背景画像と同じくずっと同じ場所にあってOKな場合は『.mainVisual』の中にテキストを入れても大丈夫です。
その下にはコンテンツを並べておきます。共通のcssの『.items』をつけておきます。
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
html,bold{ font-family: 'Noto Sans JP', sans-serif; } * { box-sizing: border-box; } .mainVisual { position: fixed; top: 0; left: 0; right: 0; margin: 0 auto; height: 100vh; width: 100%; overflow: hidden; background: url('https://blog.8bit.co.jp/wp-content/uploads/2022/05/mainvisual.jpg') no-repeat center center / cover; } #mainTitle { min-height: 100vh; } #mainTitle h1 { font-size: 8vw; color: #ffffff; text-align: center; font-weight: 700; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.8); } .items { position: relative; z-index: 2; min-height: 100vh; display: flex; /*flexはテキスト中央表示用なので不要なら消してOK*/ align-items: center; justify-content: center; } .items p{ text-align: center; font-weight: 700; color: #ffffff; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.8); font-size: 6vw; } #c01 { background: #000000; } #c02 { background: rgba(0,0,0,0.5); } #c03 { background: transparent; } |
次にCSSです。
min-height: 100vh;などを使うので全体にbox-sizing: border-box;をかけておいた方が無難です。
背景画像を置く.mainVisualについてはposition: fixed;をかけておきます。
あとは全体に広げる指定をして、背景画像を設定してください。
.itemsについては position: relative;とz-index: 2;を設定しておきます。
これでfixdedを設定しておいた背景画像の上にコンテンツが表示されます。
簡単に実現できるので、ぜひ試してみてください。
