CSSでのParallax

LPの作成時などにパララックスがどーのとかが増えている。
jsを使って実装することが多いのだがスクロールでのイベントになるのでパフォーマンス意識しだすと案外めんどくさい。
しかもパララックスの時ってデザイナーがこだわって調整することが多いからプラグインだと不便なこともしばしば
でもラクに実装したい！！

サンプル

cssでパララックス！！

ただ単に奥行きが欲しいだけならperspectiveとtranslateZを使うことでcssでも実現出来ます。
IE8??知りません。
IE10からなら動くはずです。

とりあえずサンプル用意しました。

コード

必要な部分はこんな感じ

html
<div class="container">
  <div class="layer01">レイヤー 1</div>
  <div class="layer02">レイヤー 2</div>
  <div class="layer03">レイヤー 3</div>
  <div class="layer04">レイヤー 4</div>
</div>

.container {
  perspective: 100px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
}

.layer01 {
  transform: translateZ(-100px);
}
.layer02 {
  transform: translateZ(-50px);
}
.layer03 {
  transform: translateZ(0);
}
.layer04 {
  transform: translateZ(50px);
}

サイズも距離に応じて変わるけどそれが嫌ならscaleで調整するといい感じになりります。
パフォーマンスもいいし階層増やせまくれるし横スクロールでもちゃんとなるからオススメ