CSSで作る！シンプルで効果的なパララックス・スクロールエフェクトの作り方【チュートリアル】

パララックスとは、同じものでも違う場所から見ると、位置が変わって見えるという視差効果のことです。

また、この記事で紹介しているパララックス・モーションとは同じ視界にある物同士でも、異なる速度で動いているように見える視差効果を言います。

例えば、高速道路で車に乗っていると近くの標識はどんどん過ぎていくのに、遠くの山はゆっくり動いているようにしか見えませんよね。あれがまさしくそうです。

Webでもこのパララックス効果を上手く利用すれば、テキストをスクロールしても背景画像は動いていないように見せることができます。

CSSだけで簡単にできるので、挑戦してみませんか？

１．マークアップとストラクチャ

まずはマークアップを見てみましょう。視差効果を最大限活かせるように、背景とヘディングテキスト用の｛sections｝とコンテンツ用の{sections}を使います。

{parallax}クラスの{sections}にはそれぞれ背景画像とヘディングテキストを入れて、{content}クラスの{sections}にはシンプルにコンテンツを入れます。{container}クラスは最大幅の流動的なdivで、シンプルかつレスポンシブなサイトになるようにしています。

２．CSSの中身

私が使おうとしている背景画像は全て{width}1600px、{height}600pxになっています。したがって、パララックス部分の高さは600pxで固定されます。ただ、すべてのユーザが最大幅を使っているとは限らないので、background-sizeプロパティを調整して{cover}に設定します。これで背景画像が強制的に画面いっぱいまで表示されるようになります。

次に、画面をスクロールしたときにコンテンツだけが動くよう、背景画像を固定します。Background-attachmentプロパティを調整して{fixed}にします。

３．ブラウザサポートとプロパティ情報

IE8以前だとbackground-sizeプロパティに対応していませんが、調整すれば問題ありません。この記事で使われているCSSプロパティについてもっと詳しく知りたい方は、MDNを確認してみてください。

・背景の位置＜＜リンク＞＞

・背景のサイズ＜＜リンク＞＞

・背景のアタッチメント＜＜リンク＞＞

最後に

シンプルながら面白いものができたかと思います。あまり知られていないCSSのテクニックも織り交ぜて、シンプルながら面白いものができたかと思います。デモを見たり、ソースをダウンロードしたいという方は、リンクからどうぞ。

※本記事は、A Simple Parallax Scrolling Effect Tutorialを翻訳・再構成したものです。