スクロールでコンテンツが被さるパララックス（視差効果）

See the Pen iOS対応のパララックス by チータツ (@cheese_fuji) on CodePen.

CSSの解説

コードを見る

HTML

<div class="over-area">Scroll↓</div>
<div class="under-area">Hello</div>

CSS

body{
  font-size: 5rem;
  margin: 0 auto;
  position: relative;
}
.over-area{
  height: 100vw;
  color: white;
  text-align: center;
}
.over-area:before{
  content: "";
  position: fixed; /* 重要 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100vw;
  z-index: -1; /* 重要 */
  background-image: url("ここにURL");
  background-size: contain;
  background-repeat: norepeat;
}
.under-area{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100vw;
  text-align: center;
  padding-top: 200px;
  background: #ddd;
}

上のエリアの擬似要素 :after を作成。背景を設置して position:fixed; で表示位置を固定、 z-index:-1; で最背面に移動させます。下のエリアには z-index: 1; を付与して、上のエリアよりも前面に設置する。

なお、z-index が作用しないとこのパララックスは成立しないので、以下のことに注意しましょう。

疑似要素の親要素には z-index を指定しない（もしくは初期値である z-index: auto を指定）
背景を表示させる疑似要素は、下のエリアよりも低い z-index にする
z-index は position とセットで書く（ position: static; 以外)

応用CSS

background-attachment を利用したパララックス

background-attachment: fixed; で背景画像を固定化させるという方法です。

最も簡単なパララックスの実装法ですが、background-attachment に iOS の Safari が完全対応していないため、現状では非推奨のやり方です。

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.

デモページで見る

境界線をぼかしたパララックス

背景画像にbox-shadowを使って「内向きの影」を入れます。影を内向きにするにはinsetを。影を下向きにするには広がり具合・ぼかし具合を同値にして、上下方向にマイナス値を入れます。色については下のエリアの背景色に合わせましょう。