備忘録　JQueryでメインビジュアル部分をスクロール量に応じてフェードアウトさせる方法

こんにちは
MaromaroのTakaです。

今回はHTMLコーディングで画面のスクロール量に応じてメインビジュアル部分をフェードさせていく方法をご紹介します。

メインビジュアルなので、スクロール開始位置が最上部を想定した作りになります。

イメージとしては、
表示する要素の上に疑似要素で透明の覆いたい背景色を縦横１００％で配置し、
スクロール量に応じて徐々にopacityを1へと近づける感じです。

メインビジュアル固定のパララックスとかでよく見るかもしれません。

百聞は一見に如かずなので、実際に下記をスクロールしてもらえるとわかりやすいかもしれません。

See the Pen
Untitled by 佐々木貴徳 (@efhpwfmt-the-animator)
on CodePen.

フェードさせたい要素内に疑似要素用の空のタグを置き、以下のようなCSSを記載します。

.overlay{
 background-color:rgba(255,255,255,0);
 position:absolute;
}

その要素に対して下記JSでスクロール量に応じて透明度を徐々に上げます。

$(window).on('load scroll', function() {
    var scrollPosition = $(window).scrollTop();
    var windowHeight = $(window).height();
    var opacity = Math.min(scrollPosition / windowHeight, 1); // 透明度を0から1まで変化させる

    $('.overlay').css('background-color', `rgba(255, 255, 255, ${opacity})`); // 背景色の透明度を更新
});

色については適宜変更してください。
loadを入れているのは初回表示で既にスクロールしていた場合を考慮するためです。

注意点としては今回はターゲットをwindowの高さにしておりますが、
基本的にはターゲットをフェードさせる要素の高さにした方が良いかと思います。

メインビジュアルの画面縦幅は100vhなどで高さいっぱいにすることが多いので、
このままでも十分利用できるかとおもいます。

以上、Takaでした。