パララックスとは、同じものでも違う場所から見ると、位置が変わって見えるという視差効果のことです。
また、この記事で紹介しているパララックス・モーションとは同じ視界にある物同士でも、異なる速度で動いているように見える視差効果を言います。
例えば、高速道路で車に乗っていると近くの標識はどんどん過ぎていくのに、遠くの山はゆっくり動いているようにしか見えませんよね。あれがまさしくそうです。
Webでもこのパララックス効果を上手く利用すれば、テキストをスクロールしても背景画像は動いていないように見せることができます。
CSSだけで簡単にできるので、挑戦してみませんか？
１．マークアップとストラクチャ
まずはマークアップを見てみましょう。視差効果を最大限活かせるように、背景とヘディングテキスト用の｛sections｝とコンテンツ用の{sections}を使います。
{parallax}クラスの{sections}にはそれぞれ背景画像とヘディングテキストを入れて、{content}クラスの{sections}にはシンプルにコンテンツを入れます。{container}クラスは最大幅の流動的なdivで、シンプルかつレスポンシブなサイトになるようにしています。
２．CSSの中身
私が使おうとしている背景画像は全て{width}
スポンサーリンク
CSSで作る！シンプルで効果的なパララックス・スクロールエフェクトの作り方【チュートリアル】
マーケティング最新
コメント