一見難しそうに見えるパララックスですが、実はCSS3だけでも、ダイナミックで美しいパララックスを実装することができます。特に商品や外観、デザインアートなど、フラットデザインなどを使用してアーティスティックに表現したい場合に、 パララックスは必要不可欠。様々な画像を重ね合わせて、3D化されたパララックスは非常に困難を極めますが、トップにピンポイントで目を引きたい場合は、シンプルなパララックスでも十分な印象を与えることが可能です。
このホームページはCSS3,HTML5,jQeryなどを駆使した、YAMAMOTO STUDIOオリジナルサンプルフォームです。様々なプラグインやデザインレシピを、コピペでご利用いただけます。
今回はbackground設定でcover＆background-attachment:fixedを使用することにより、背景を固定し、その上を自由にスクロールさせる設定がポイントとなります。まずはHTMLの記述から。セクション背景に関しては、CSSでの設定になりますので、ここでは表題、文章の記述のみとなります。
[Parallax_HTML・1] <!-- Parallax Section --> <section class="banner"> <h2 class="parallax"><a href="https://black-shiva.com/" target=”_blank”>DYNAMIC PARALLAX</a></h2> <p class="parallax_description"><a href="https://black-shiva.com/" target="_blank">BLACK SHIVA ORIGINAL MATERIAL.</br>Beautiful metallic material that makes full use of wrap and light in Photoshop.</a></p> </section>
次にCSS設定です。ackground-size: cover;にて表示画面を全体的に覆うように背景画像を表示させます。background-attachment: fixedにて背景画像を固定し、画面表面の表題と文章だけが背景画面の上をスクロールされるように設定します。
[Parallax_CSS・1]
banner1{
background-color: #000000; /*背景色*/
background-image: url("../images/metallic2_bg.png"); /*背景画像の設置*/
height: 400px; /*パララックスの高さ*/
background-attachment: fixed; /*背景画像を固定して動かなくし、画面だけをスクロールさせる*/
background-size: cover; /*表示領域全体を覆うように背景画像を表示する*/
background-repeat: no-repeat; /*背景画像を繰り返さない*/
}
いかがですか？幾重にも重ねられたようなパララックスだとjQueryのお力沿いも必要となりますが、css3一つでインパクトある動きを制作できるのはとても便利ですね。様々なバックグラウンド画像を使って、トライしてみてください！