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

関連記事

  • text-alignが効かない時に考えられること

    2021.02.24

    【CSS】text-alignが効かない時に考えられること

    CSS

  • 2021.02.23

    【CSS】三角形の装飾でコンテンツの境界を区切る方法

    CSS

  • 2021.02.22

    【CSS】IEだけ崩れてしまうフォント対策

    CSS

おすすめ記事

  • 2020.12.19

    PowerPointで目次を簡単に作る方法【スライド内リンクを設定する方法も紹介】

    その他

  • 2020.11.28

    Basic認証の設定方法と注意点

    その他

  • 2020.12.16

    【CSS】フォントサイズのpx、em、remの違い

    CSS

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design