eyemovic inc.

Works blog仕事の取り組み・ビジョン

2015.02.27

CSSだけで動くパララックス

パララックスとは?

パララックスという言葉があります。
日本語では視差とも言い、
IT業界では、ウェブページの表現の一部として使われることがあります。

特にウェブページでは、どのような表現かと言うと、
縦に長いページがあり画面をスクロール。
すべての画像やテキストが同じ速度でスクロールされるのではなく、
それぞれ異なった速度でスクロールされる、
というものが基本形です。

 

このパララックス効果が広まりはじめた頃は、
JavaScriptによる実装が主流でした。
たとえば、次のような記述をすることで、
demo1というクラスをつけた要素が、通常の2倍の速度でスクロールされます。

 

同じことをCSSでやろう!

JavaScriptの場合は速度調整でしたが、
実は、CSSで実装する手段のほうが、本来の視差という言葉の意味に近いです。
どういうことか説明します。

電車に乗って、流れゆく景色を楽しむことがあると思います。
その時、近くのものは速く流れ、
遠くのものは、ゆっくりと流れていきます。
遠近による体感速度の違いです。

 

CSSでは、座標を指定することができます。
左から何ピクセル、上から何ピクセル。
X軸・Y軸の指定ですが、これでは平面なので遠近がありません。

そこで、CSSにはZ軸が用意されています。
奥行きです。3Dです。
ディスプレイは平面ではありますが、
理論上は、ディスプレイの中で遠近があります。

それを表現するCSSが、こちらです。

クラスdemo2は、通常の要素よりも100ピクセル近くに位置します。
つまり、自分から見てより近い位置にあるので、通常よりも速くスクロールされる
という原理です。

 

また、CSSとして必須の記述がひとつあります。

実装コンテンツのコンテナをひとつの舞台として見た場合、
どの辺りの客席から舞台を見ているか、奥行きの設定をします。
この記述が遠い・近いの基準となり、先述のクラスdemo2に遠近感が生まれます。

 

CSSだけで動くパララックスのデモ

CSSでパララックスを実装した例です。
※デモでは、試験的にすべてのベンダープレフィックスをはずしています。
 今のところ、Google Chromeで動作するようです。
※マウス操作用に、画面を滑らかにスクロールさせるJavaScriptを入れていますが、
 これは、パララックスとは無関係です。なくてもCSSによるパララックスは動きます。

上から順に、太陽・雲・雨それぞれにパララックス効果があります。
近くに設定されたものは速く通り過ぎ、
遠くに設定されたものは遅れるという遅延効果があります。

ページ下のほうにある人工衛星と星は、
おまけ要素でパララックスではないのですが、
こちらもCSSのみで別の演出をつけています。

 

今後の展望

JavaScriptでやってきた演出のいくつかを
CSSで実装することが将来の主流になると思われます。
イベント実行のトリガーとしては、JavaScriptを使うことが多いでしょうが、
アニメーションの処理はCSSのほうが速く、
さらに立体的な角度の演出が進んでいるためです。

ただし、多くの人が今まさに新しいブラウザへ移行する過渡期である現在、
旧ブラウザでは静止表示させ、新しいブラウザでのみ演出をする
という流れになるのではと考えられます。

愛媛県松山市でWeb開発一筋15年、700サイト以上の構築実績!

Webサイト制作・システム開発・スマホアプリ開発・組込ソフトウェア開発ならアイムービックにお任せ下さい。