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についての関連記事 ▼▽▼

0

関連記事

  • 2021.05.14

    【CSS】backgroundで行う背景画像の複数指定

    CSS

  • 2021.05.11

    【おすすめ書籍】この本でゼロからWebサイト制作を学びました

    CSS

    HTML5

  • 2021.04.21

    【CSS】要素がはみ出てしまう時のチェック事項 / box-sizingの指定

    CSS

おすすめ記事

  • 2019.02.08

    【css】IEにobject-fitを簡単に効かせる方法

    CSS

  • コーディングで画像を好きな形に切り抜く方法

    2021.02.10

    【CSS】コーディングで画像を好きな形に切り抜く方法【IEにも対応】

    CSS

  • 2019.03.15

    【WordPress】固定ページにページネーションを効かせる方法

    WordPress

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design

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

REQUEST

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