【CSS】CSSとHTMLだけでパララックス風エフェクトを実装する方法
派手過ぎず文章を読む際に邪魔にならない演出が素敵なパララックス効果。今ではたくさんのjQueryプラグインがあり、実装も簡単になってきています。
javascriptはほとんどのブラウザが対応しており、現在のWeb業界では無くてはならない存在ですが、読み込みすぎるとページのロードが遅くなったり、他プラグインとの競合など管理が大変になってきますので使わなくて済むならそれに越したことはありません。
そこでCSSだけでパララックス風の効果を実装してしまおうというのが本題です。
CSSなら重くないし、動きもサクサク快適です。
この記事の目次
HTML
HTMLは至ってシンプルです。
視差を出したい背景画像を表示するためのボックスを1つ作り、その中でも外でも良いので通常通りテキストを置きます。
今回は背景画像を表示するボックスはdivタグで、その中に表示するテキストはh1タグで用意しました。
<div class="parallax image01"> <h1 class="title01">タイトルが入ります</h1> </div>
CSS
先程マークアップした要素をスタイリングします。
上でマークアップしたdivタグには「parallax」というクラスと「image01」という2つのクラスを付けました。「parallax」では表示する背景画像のサイズや位置、動作を指定し、「image01」ではどの画像を表示するかというパスだけを指定しています。
こうすることで1ページ中にいくつもパララックス効果を使いたい場合に「parallax」というクラスの使い回しがしやすくなります。
「title」は画像の真ん中辺りにタイトルを持ってきたかったので「line-height」の値をdivの高さと同じ値にしています。
.title{
padding: 0 15px;
margin: 0 auto;
line-height: 600px;
font-size: 3em;
text-align: center;
font-weight: bold;
text-shadow: 0 0 10px rgba(0,0,0,.4);
}
.parallax{
width: 100%;
height: 600px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.image01{
background-image: url(/images/image01.jpg);
}
注意点としてはCSSの最後の.image01の部分でbackground-imageで画像を指定している部分ですが、ここをbackgroundで指定するとちゃんと動作しません。
理由はbackgroundという指定はbackground関係を一気に指定するショートハンドであるため、記載していない項目は規定値に指定されてしまうためです。そのため、先に「parallax」でbackground-positionやbackground-attachmentを指定していても、CSS的に後で指定された規定値に上書きされていることになります。
ここは横着せずに画像のパスだけを指定するbackground-imageで指定してあげれば、ちゃんと「parallax」で指定してあげた項目が生きてきます。
デモを見る管理人「よら」はこう思う
個人的にはCSSで出来るところはCSSで表現したいところです。
Webの技術が発達していくことで、どんどんリッチな表現が出来るようになってきましたが、何でも出来るからといって何でもしてしまうと予想外にサイトが重くなってしまいます。まずはそのサイトを見てもらうことが大切なのに、読み込みに非常に時間が掛かってストレスとなり、閲覧者が離脱してしまっては元も子もありません。
あとはIEさんの鉄壁のブロックをどこまで回避できるかですね。古いIEの使用率はだいぶ少なくなったものの、IEさんはやはり鉄壁。広範囲に枝を張っており、大事な場面で絡めとってくるので油断はできません。そういう場合は諦めてjavascriptを使うと楽になれます。
