縦長のサイトで背景画像が次々と切り替わりる、本をめくっているような、紙芝居を見ているような表現方法を、昨今よく見かけるようになりました。
まめわざでは、このような表現に必須である「スクロールしない」背景を手軽に設定できるようになりました。
今回の記事では、実際に「スクロールしない」背景を使いながら、やや大仰に本機能の使い方の説明と最後にウェブ制作者向けの解説を行います。
尚、ここで使用している画像には特に意味はありません。pixabayの人気の画像を使わせていただいております。
まめわざの背景画像の設定箇所に「スクロールしない」というチェックボックスを設置しました。これをチェックすることで簡単にスクロールしない背景画像を設定できます。
メイン画像の編集ページでは、この「スクロールしない」チェックボックスを下部に用意しましたので、より手軽にスクロールしない画像を設置できます。
また、複数画像を登録した場合は、固定された画像がさらにスライド表示されます。
メイン画像の編集ぺーじの例まめわざの装飾は3層構造になっています。
いつも装飾する「ブロック」、このブロックを複数含む「グループ」、更にグループを複数含む「行」の3層です。
「装飾」ボタンを押した際に、左側に出てくるタブメニューの下部にある「グループ」や「行」の欄でこれらを装飾できます。
ページの左右一杯に広がる画像を設置する場合は「行」の背景に画像を設定する必要があります。
「行」の背景に画像を設定しても、ページの左右一杯に画像が広がらない場合があります。それは、サイドを利用している場合です。図のようにサイドの編集ページで「削除」をクリックしてサイドを削除すると、「行」が左右一杯に広がります。
尚、サイドを削除できないデザインや、コンテンツの幅が限られているデザインでは、サイドを削除しても「行」の幅は制限されます。
画像上の文字は単色の上の文字に比べて読みづらくなります。よって、画像の背景色を設定することをお勧めします（画像の色彩によっては不要な場合もあります）。
しかし、文章の背景を設定するとその下の背景画像が見えなくなってしまいます。そこで、文章の背景を透過させます。このように透明度を設定することで、やや透明な背景を設定できます。
背景画像を設置し透過背景を設定すると見栄えが良くなります。しかし、文章が読みづらくなる可能性があります。
この場合は、文字を大きくしたり・太字にしたり・影を付けたりして、判読性を向上させましょう。
ページをスクロールするたびに、対話のようにストーリーを伝える形式をよく見かけます。
この場合、通常は複数ページに分けるような要素でも、1ページ内に収めて縦長のページにしましょう。
まめわざでは、問合せフォームなども自由に設置ができますので、例えば、商品の紹介→商品の写真→お客様の声→問合せフォーム、といったストーリーで様々なコンテンツを1ページに設置する場合でも楽々です。
必ず必要な表現方法ではありません。デメリットも多いため、自己満足に陥らないように注意しましょう。
*) iPhoneやiPadではスクロールに支障をきたすため、まめわざではこれらの端末で「スクロールしない画像」をOFFにしています（詳細は以下の技術的な説明に記載しています）。
まめわざのパララックス効果はCSSだけで実装されています。
パララックス効果は、背景画像にbackground-attachment:fixedを設定するだけで簡単に実現できます。
画像を画面いっぱいに広げるために、htmlやbodyにheight:100%を設定し、例えば次のようなHTMLとCSSを用意すれば効果が得られます。
<head>
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
div.parallax {
height: 100%;
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
</style>
<body>
<div class="parallax" style="background-image:url(写真1.jpg)"></div>
<div class="parallax" style="background-image:url(写真2.jpg)"></div>
<div class="parallax" style="background-image:url(写真3.jpg)"></div>
</body>
画像と画像の間に、メッセージを載せた単色の帯を挟むと、帯の部分が画像を捲っているように見えます。
<head>
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
div.parallax {
position: relative;
height: 100%;
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
div.belt {
position: relative;
z-index: 1;
height: 300px;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 0 5px;
box-shadow: rgba(0, 0, 0, 0.5) 0 0 5px;
}
div.msg {
position: absolute;
display: block;
left: 0;
top: 50%;
width: 100%;
line-height: 0;
text-align: center;
font-size: 300%;
}
div.parallax div.msg {
color: #fff;
-webkit-text-shadow: rgba(0, 0, 0, 0.3) 0 0 5px;
text-shadow: rgba(0, 0, 0, 0.3) 0 0 5px;
}
</style>
<body>
<div class="parallax" style="background-image:url(写真1.jpg)"></div>
<div class="belt"><div class="msg">このようにメッセージと</div></div>
<div class="parallax" style="background-image:url(写真2.jpg)"></div>
<div class="belt"><div class="msg">組み合わせることで</div></div>
<div class="parallax" style="background-image:url(写真3.jpg)"><div class="msg">印象に残るような</div></div>
<div class="belt"><div class="msg">表現ができます</div></div>
</body>
div.msgではline-height:0とposition:absoluteを利用し、文字を中央に配置しています。
このようにbackground-attachment:fixedだけで手軽に実装できますが、それだけでは以下のような問題が発生します。
訪問者で最も利用者が多いiOSとインターネットエクスプローラーが対象となるため、対策が必須となります。
これら2つの問題を同時に解決する方法があります。それは、htmlタグがスクロールしているのをbodyタグがスクロールするように変えることです。具体的には、以下のCSSを追加します（以下、この方法を「body{overflow:scroll;}法」と呼びます）。
html {
height: 100%;
overflow: hidden;
}
body {
height: 100%;
overflow: auto;
}
これにより万事解決したように思えますが、別の問題が2つ発生します。
iOSの慣性スクロールが効かなくなる現象は、影響が非常に大きいです。
慣性スクロールに慣れたスマートフォンユーザーは、ページをスクロールする際に、完全に画面が停止する前に「余計に滑る分」を計算してスクロールするため、この効果が得られないと不快感を覚えます。また、慣性スクロールが効かないことで、ページ全体が重いような印象も与えます。
一方、この方法を採用すると、windowのscrollTopでスクロール量が取得できなくなります。その代りbodyのscrollTopでスクロール量を取得します。
jQueryプラグインなどを利用していて、コードのカスタマイズが難しい場合は、この方法かjQueryプラグインのいずれかを諦める必要があります。
また、webkit系ブラウザでは、bodyでもscrollTopが取得できないという問題があります。scroll量が一切取得できなくなりますが、以下に説明するような解決方法もあります。
上記のbody{overflow:scroll;}法を採用し、更にwebkitでscroll量を得る代替案があります。bodyではなく、body直下に設置したdivで同じことをやる方法です。
HTMLは
<body>ページの中身</body>
を
<body><div class="wrapper">ページの中身</div></body>
として、スタイルシートは
html {
height: 100%;
overflow: hidden;
}
body {
height: 100%;
overflow: hidden;
}
div.wrapper {
height: 100%;
overflow: auto;
}
とします。
このようにすると、jQueryでは$("div.wrapper").scrollTop()としてスクロール量が取得できるようになります。
パララックス効果の表現が絶対に必要な場合は、慣性スクロールが効かないことを甘受して、body{overflow:scroll;}法を採用しましょう。
しかし、パララックス効果が無くても構わない場合や、モバイル端末で表示するとその効果がぼやける場合は、ユーザビリティを重視し慣性スクロールを優先させることを強くお勧めします。
以上から「iOSではbackground-attachmentを無効化する」という方法を解説します。
iOSでbackground-attachment:fixedとbackground-size:cover;が併用された場合、背景画像が正しく表示されない場合があります。background-size:coverを使っている場合は、以下のmedia queryをCSSに追加しましょう（div.parallaxに背景画像を設定する例）。
尚、max-device-width:1024pxはiPad対策で、このメディアクエリにはネットブックのユーザーが巻き込まれます。弊社のアクセス解析の結果、横幅が1,024pxのWindowsを利用しているユーザーよりも、iPadを利用しているユーザーの方が多いので、ノイズを含んだこのクエリを採用しています。
div.parallax {
background-attachment: fixed;
}
@media only screen and (max-width: 767px), only screen and (max-device-width: 1024px) {
div.parallax {
background-attachment: scroll;
}
}
body{overflow:scroll;}法はIE対策としては有効です。しかしiOS環境に邪魔をしないよう、CSSハックを使って適用します。
@media all and (-ms-high-contrast:none) {
/*IE11用*/
*::-ms-backdrop,html{
height: 100% !important;
overflow: auto !important;
}
*::-ms-backdrop,body{
height: 100% !important;
overflow: auto !important;
}
/*IE10用*/
html{
height: 100% !important;
overflow: auto !important;
}
body{
height: 100% !important;
overflow: auto !important;
}
}
尚、上で説明したようにIEでもhtmlからscroll量が取れなくなりますので、Javascriptで利用している場合は、bodyから取得するように変更してください。
という対策を行った場合のデモを用意しましたので、IE11やiOSでご確認下さい。