単純な視差スクロール効果を作成する方法

公開: 2017-09-08

このチュートリアルでは、静止した背景とスクロールコンテンツを使用して、最も簡単な方法で美しい視差スクロール効果を確認します。

ソースファイルをダウンロードするデモを見る

簡単な紹介

視差は、異なる位置から見たときにオブジェクトの位置が異なるように見える効果です。視差運動、またはこの場合は視差スクロールは、同じ視線内にあるが、それらの間に距離がある2つのオブジェクトが異なる速度で移動しているように見えるという錯覚を与えます。時速100kmで高速道路を運転しているときに車の窓の外を見たことがあれば、電柱が高速で急降下しているように見え、背景の山々は非常にゆっくりと移動しているように見えます。、ほとんど停止しています。これは実際の視差運動です。

Webに関する限り、背景画像とテキストが上にあるコンテナに視差効果を誘発することができます。最も単純な形式では、視差スクロールによりコンテンツが通常どおりスクロールされ、背景は静止したままになります。最も単純な形式のこの手法の利点は、CSSのみが必要なことです。掘り下げてみましょう。

マークアップと構造

応答しないサイトで修正された場合、これを達成するためのトリックはありません。しかし、私たちはレスポンシブWebデザインの時代にいるので、それはやめましょう。恐れるな！自由に使える素敵なCSSがいくつかあります。しかし、最初に、いくつかのマークアップを見てください。マークアップは単純です。最大の効果を得るために、背景/見出しテキストsectionsとコンテンツsectionsを交互に配置します。外観は次のとおりです。


  
    穏やか
  



  
    Lorem Ipsum Dolor
    Lorem ipsum dolor sit amet、consectetur adipisicing elit .. ..
  



  
    上昇
  



  
    Lorem Ipsum Dolor
    Lorem ipsum dolor sit amet、consectetur adipisicing elit .. ..
  



  
    落ち着いて
  



  
    Lorem Ipsum Dolor
    Lorem ipsum dolor sit amet、consectetur adipisicing elit .. ..

parallaxのクラスを持つ各sectionには、背景画像と見出しテキストが含まれますが、 contentのクラスを持つ各sectionには、単純なコンテンツを含むセクションが含まれます。 containerクラスは最大幅の流体divであるため、すべての応答性が非常に単純になります。それでは、CSSについて詳しく見ていきましょう。

スタイリングとCSSで機能させる

最初に注意すべき点は、私の背景画像はすべてwidthが1600ピクセル、 heightが600ピクセルであるということです。これにより、視差セクションを600pxの固定高さに設定できます。しかし、それだけではありません。背景を繰り返したくないので（大きくて太字の画像を使用しています）、ユーザーが最大幅になるとは限りません（背景画像を完全に表示できるようになります）。幸いなことに、CSSのbackground-sizeプロパティを利用して、 coverに設定できます。これにより、背景画像が比例して拡大され、使用可能なスペース全体を占めるようになります。ただし、最大限のサポートを得るにはプレフィックスを付ける必要があるため、注意してください。

最も重要なことを除いて、これまでのところ良いです。コンテンツがスクロールして通過する間、背景画像を所定の位置に固定したままにする必要があります。繰り返しになりますが、CSSは私たちの生活を楽にしてくれます。 background-attachmentプロパティを利用して、 fixedに設定します。単純！メディアクエリの例を使用して、CSSは次のようになります。

 / * ================================================ ============
  一次構造
================================================== ========== * /
。容器 {
  最大幅：960px;
  マージン：0自動;
}
/ * ================================================ ============
  セクション
================================================== ========== * /
section.module：last-child {
  マージンボトム：0;
}
section.module h2 {
  margin-bottom：40px;
  font-family： "Roboto Slab"、セリフ;
  フォントサイズ：30px;
}
section.module p {
  margin-bottom：40px;
  フォントサイズ：16px;
  フォントの太さ：300;
}
section.module p：last-child {
  マージンボトム：0;
}
section.module.content {
  パディング：40px 0;
}
section.module.parallax {
  高さ：600px;
  背景位置：50％50％;
  background-repeat：no-repeat;
  背景-添付ファイル：修正済み。
  背景サイズ：カバー;
}
section.module.parallax h1 {
  色：rgba（255、255、255、0.8）;
  フォントサイズ：48px;
  行の高さ：600px;
  フォントの太さ：700;
  text-align：center;
  text-transform：大文字;
  テキストシャドウ：0 0 10px rgba（0、0、0、0.2）;
}
section.module.parallax-1 {
  背景画像：url（ "../ img / demo / _small / 1.jpg"）;
}
section.module.parallax-2 {
  背景画像：url（ "../ img / demo / _small / 2.jpg"）;
}
section.module.parallax-3 {
  背景画像：url（ "../ img / demo / _small / 3.jpg"）;
}

@media all and（min-width：600px）{
  section.module h2 {
    フォントサイズ：42px;
  }
  section.module p {
    フォントサイズ：20px;
  }
  section.module.parallax h1 {
    フォントサイズ：96px;
  }
}
@media all and（min-width：960px）{
  section.module.parallax h1 {
    フォントサイズ：160px;
  }
}

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

一般的なブラウザのサポートは本当に素晴らしいです。 IE8以下はbackground-sizeプロパティをサポートしませんが、単純な条件付きスタイルで対応する必要があります。それを除けば、すべてがサポートされており、問題はないはずです。このチュートリアルで使用されるCSSプロパティの詳細については、MDNを確認してください。

背景位置–MDNリファレンス
背景サイズ–MDNリファレンス
背景の添付ファイル–MDNリファレンス

要約

ここでは、シンプルで効果的で、通常のすべてを一度にスクロールするような外観とは少し異なるものを実装しました。望ましい効果を達成するために、いくつかの優れた、しかしあまり知られていないCSS手法を利用しました。そして、それは終わりです！以下のリンクをクリックすると、デモを表示してソースをダウンロードできます。質問、コメント、フィードバックがある場合は、以下に残すこともできます。