ブレンド・モードとスクロール・スナップを使ったエフェクト

　こんにちは！　今回はフルスクリーンでで表示させるエフェクトにつき、２種類の効果を使ったものを紹介します。
スクロールごとにバックグランド画像と色をブレンドさせながら表示させる効果と、少し動かしたスクロールでも勝手に、表示領域の位置へ「ピッタリ」と止まるスクロール・スナップ(scroll-snap)プロパティを実装させたエフェクトです。🤭

• 背景画像と背景色を重ねた効果をCSS ブレンドモードで
• スクロール時、表示域に止める効果は CSS スクロール・スナップで
• JavaScript を使わずとも CSS のみで実装

・background-blend-mode:
background-blend-modeは、背景画像と背景色に色々な加工（ブレンド）を行うことができます。背景画像と背景画像のブレンドを行うこともできます。

normal ;　初期値（通常画像のまま）
multiply ;　乗算（掛け合わせる）
screen ;　スクリーン（スクリーンを掛ける）
overlay ;　オーバーレイ（上に置く）
darken ;　暗く合成する
lighten ;　明るく合成する
color-dodge ;　覆い焼きカラー（ごまかし）
color-burn ;　焼けたように合成する
hard-light ;　ハードライト（ハードに明るく合成する）
soft-light ;　ソフトライト（ソフトに明るく合成する）
difference ;　差の絶対値（相違で合成する）
exclusion ;　除外
hue ;　色相
saturation ;　彩度
color ;　カラー
luminosity ;　輝度

・background: #f00 url(“image0045/computer.jpg”);
上記のbackground-blend-modeプロパティを指定することで、バックグランドの背景色「#f00」と背景画像をブレンドさせます。また、背景色の代わりとしてbackground-imageにより「、カンマ」で区切って複数の画像を重ねる事もできますよ。[ background-image: url(“xxx.jpg”) , url(“xxx.jpg”) ; ]

See the Pen bGeeNPQ by bens-user (@ben1099user) on CodePen.

💻 ben1099url.starfree.jp/0045.html ( DEMO )

スクロールスナップの実装に最低限必要なのは`以下の記述のみです。

・overflow: auto;　親要素
・scroll-snap-type:y mandatory;　親要素
・scroll-snap-align:start;　子要素

「height: 100vh;」で親要素と子要素ともに画面いっぱいに高さを指定しており、親要素のcontainerには「overflow: auto;」を指定します。
そして、ポイントは親要素に指定している「scroll-snap-type: y mandatory;」、子要素に指定している「scroll-snap-align: start;」です。

・scroll-snap-type: y mandatory ; （y スクロール方向　mandatory スクロール位置）
このコードは垂直方向に要素をスナップさせるためのですが、プロパティの指定には以下の種類があります。

スクロールの方向を指定する
[ x ]　x軸は横方向のスクロールスナップを実装する場合。
[ y ]　y軸は縦方向のスクロールスナップを実装する場合。
[ both ]　bothを指定すると、横方向と縦方向の両方に対応させることができます。

スクロールの位置を調整する
[ mandatory ]　スクロールの位置を厳密に調整してくれるので、綺麗に止まります。
[ proximity ]　proximityはmandatoryほど厳密ではなく、スクロールを止めた位置がスナップポイントに近い場合には調整されますが、中途半端な位置に止まってしまいます。

・scroll-snap-align: start ;
止める位置を子要素に指定する
[ start ]　開始位置で止めたい場合
[ end ]　終了位置で止めたい場合
[ center ]　中央で止めたい場合

scroll-snapプロパティを使用すると、スマートフォン画面のようにチョットずらすだけで、次のコンテンツを表示させることができますね。☕