CSS（sticky）でパララックス風エフェクト
CSSだけでパララックス風のコンテンツ cssのposition: sticky;の動きがすごく気に入ってしまい、何か面白い事がきないかと考えておりました。そんなときに思いついたのが今回のなんちゃってパララックスです。 まず、パララックスの定義（パララックスとは？）ですが。 複数のレイヤーが重なって配置されている スクロールすると各レイヤーが異なるスピードで動く 前後のレイヤーが独自にスクロールし、奥行き感が出る 明確な場面の変更ができ、印象的な演出ができる といったところかなと思います。パララックスが注目されるようになってずいぶん経ちますが（おそらく2012年頃？）それほど普及したとは言えない状況だと思います。最近のパララックスは当初のような前後のレイヤーのスライド量を変えるといった華美な動きは少なく、スライドと共に文字やカード、アイコンなどが浮き出たりフェードインしたりといった演出が主流のようです。 パララックスの実装方法ですが、大抵の場合JavaScriptのスクロールイベント（window.onscroll）を用いてターゲットのスクロール位置を取得（sampleElement.scrollTop）し、表示位置になったらクラス追加などして、動きのある演出を行っているようです。 ただ、JavaScriptを使うとなると、専門のエンジニアが必要となり、どうしても二の足を踏む事も多くございます。そこで今回のご提案ですが、JavaScriptを使わずにcssのposition: sticky;でなんとかパララックスっぽい見せ方ができないかというものになります。以下が実装サンプルHTMLとCSSになります。 See the Pen CSS（sticky）でスクロール）パララックス風エフェクト by yoshiaki nakao ( @woopeer ) on CodePen . パララックスの醍醐味として背景とコンテンツが別々にスクロールするギミックが必要になってきます。そこでposition: sticky;を使って次のコンテンツが表示されるまでタメておき、次のコンテンツが現れた時に入れ替わるよう工夫いたしました。 まずコンテンツとコンテンツの間を「m