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;を使って次のコンテンツが表示されるまでタメておき、次のコンテンツが現れた時に入れ替わるよう工夫いたしました。

まずコンテンツとコンテンツの間を「margin: 40vh 0;」で上下40vhの間隔で配置し十分に距離を取りました。こちらはスクロールで動かし場面（コマ）が変わるような演出になります。そして今回最大のポイントは、コンテンツの後ろに「.slide-show-wrap::after {height: 30vh;}」と30vhのスペースを追加している点です。こちらはスクロールのタメを生み出している部分でございまして、この部分がないと常に背景と同じスクロールになってしまいますので前後の視差が生まれません。この部分がタメを作り前後レイヤーの視差を生じさせているのです。

また、左右で分けて左コンテンツが表示された後に右コンテンツを順番に表示するようにした事で１つのコンテンツの中に２コマの要素を入れる事もできました。これにより画像を示したのち、その説明や補足、といった事が可能になります。

【補足】
今回使用した背景画像ですがよりスピード感や新しさを出そうと考えましてストライプの光の画像を選択いたしました。またコンテンツの背景もCSSグラデーションで上下のカラーを変更し動きが感じられるようにしてみました。

以上、CSSでなんちゃってパララックスでした。ありがとうございました。