[css] 背景の多重スクロールで遠近感を演出

cssにポリゴン表示があることを最近知った、ユゲタです。 先日、WEBデザイナーの方から、宇宙の表現で魅力的な方法はないかと聞かれたんですが、平面的な画面になりがちなWEBサイトに、空間を感じることができるようにするために、多重スクロールでの表現方法を提案してみました。 その時に作ったサンプルをブログに残しておきます。

本日のIT謎掛け

「背景画像」と、かけまして・・・ 「瀬戸内海で旅行に行く場所」と、ときます。 そのココロは・・・ みえかくれ、しますね。 （見え隠れ） （三重か、呉、志摩、っすね。）

背景画像の空間表現

空間表現は、奥行きを感じる表現で表すのが効果的です。 画力のモノを言わせて、背景画像を一生懸命作るよりも、ホームページのスクロールの際に、少しずれたスクロールをする背景画像を置いてあげることで比較的簡易に奥行きは感じることができます。 電車に乗っている時に、奥に見える山よりも、手前にある、住宅のほうが早く動いて見えるというのと、同じ効果が得られます。 単純にセットする場合は、スクロールに依存しない、fixed背景を置いて、その手前に、少しだけ動かす背景を置くことで、似たような効果が得られます。

サンプル

見たほうが早いと思うので、サンプルを載せておきます。

See the Pen scroll-bg by YugetaKoji (@geta1972) on CodePen.

簡単解説

できるだけ汎用性をもたせようと思って、javascriptで計算して、移動用の背景の座標を計算させています。 bodyタグのすぐ上に来るように、背景画像用のタグを設置して、それを、スクロールイベントに連動して、座標を動かしているだけなのですが、 この時に、この移動するタグは、position:fixedを使いましょう。positon:absoluteで移動させればいいかと思ってやってみたところ、スクロール連動する際に、移動アニメーションがガクガクになってしまうので、fixedにすると、スムーズな見た目を得られます。 そして、肝心の移動する座標計算は、画面全体のスクロールサイズとから表示サイズの割合を出して、少し大きめに配置した移動用背景画像の表示外サイズの割合と照らし合わせてその割合分を移動値に変換処理しています。 意外とほんの少し動かすだけで、効果が出ることが分かります。 ちなみに、移動速度を大きくしたい場合は、移動用タグのheightの値をサンプルでは110%にしているところを増やしてあげると、もっと早く動くことができるようになります。 今回は、移動用タグは１つのみでしたが、画面のメモリが許すのであれば、２つ、３つにして、サイズを変更することで、多重スクロールの効果が得られて、より空間認識が強い効果が得られるでしょう。 javascriptなどで、いいプラグインなどもあるかもしれませんが、とりあえずは、この程度は簡単にできるので、自力でやったほうが早いでしょう。 宇宙空間だけはなく、色々な背景画像に摘要できそうですね。 そう考えると、ホームページを作る時にワクワクしてきませんか？