CSS JavaScript

2019.04.09

【コピペで簡単】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についての関連記事

関連記事

  • 2021.10.01

    【コピペで簡単!】CSSのみで作るシンプルなセレクトボックス(矢印の消し方や枠のサイズ変更方法も解説)

    CSS

  • 2021.09.28

    読み込みが終わったら処理!onloadイベントの使い方と注意点について解説【JavaScript】

    JavaScript

  • 2021.09.24

    JavaScriptの勉強におすすめの本7選【初心者〜上級者別に厳選】

    JavaScript

おすすめ記事

  • 2021.06.30

    【おすすめ書籍】Sassを始めてみるならこの1冊

    CSS

  • 2021.09.24

    JavaScriptの勉強におすすめの本7選【初心者〜上級者別に厳選】

    JavaScript

  • 2021.08.31

    超簡単!Wordpressにヒートマップを導入する方法

    WordPress

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!