【コピペで簡単】jQueryでスクロールに合わせてだんだん不透明になる背景を実装

今回はスクロール値に連動して透明から不透明になる背景を実装する方法をご紹介します。

手軽に最近っぽい演出効果を得られるので、アーティスティックなサイトに仕上げたり、シンプルなページでも、これを実装するだけで他のサイトとはちょっと違った味を出せるのも魅力です。

◆◇デモページ◇◆

コードは下記です。クラス名や不透明度の調整などはアレンジしてくださいね♪

HTML

<div class="fv">
    <p>スクロールしてください<br>↓↓↓↓↓↓</p>      
</div>
<div class="overlay"><!--不透明度を変えるコンテンツ-->
    <p>#fff背景のopacityが0→1.0に変わります。</p>      
</div>
<div class="contents">
    <p>次のコンテンツ</p>
</div>

css

/*-----------固定FV----------*/
.fv{
	background: #055a8c;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fv p{
	color: #fff;
    line-height: 2;
    text-align: center;
    font-size: 20px;
}

/*-----------オーバーレイ----------*/
.overlay{
	width: 100%;
    padding-top: 100vh;
    padding-bottom: 100vh;
    background: #fff;
    opacity: 0;
    position: relative;
    text-align: center;
    font-size: 20px;
}

.overlay p{
    margin: 50vh auto 0;
    background: #000;
    color: #fff;
    max-width: 300px;
    padding: 20px;
    line-height: 1.5;
}

/*-----------次のコンテンツ----------*/
.contents{
	width: 100%;
	height: 500px;
	position: absolute;
	background: #000;
}

.contents p{
	font-size: 15px;
	line-height: 1.5;
	color: #fff;
	text-align: center;
}

js

<script>
  $('div.overlay').each(function () {
    var $win = $(window),
        $winH = $win.height(),
        $connect = $(this),
        position = $connect.offset().top,
        current = 0,
        scroll;
    $win.on('load scroll', function () {
      scroll = $win.scrollTop();
      current = (0 - (position - scroll) / $winH);
      if (current > 0.9) {
        current = 1;
      }
      if (scroll > position - $winH) {
        $connect.css({opacity: current});
      }
    });
  });
</script>

手順は以上です。
是非ご活用ください！

jQueryについての関連記事

【コピペで簡単】jQueryでスクロールに合わせてだんだん不透明になる背景を実装