スクロールでCSS「opacity」を変化させるcssとjavascript

Filed under: JavaScript — kdcs @ 24年2月24日 土曜日 
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="robots" content="none">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./style.css">
<link rel="shortcut icon" href="">

<style>
body { margin: 0; padding: 0; }
/*-----------固定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: #000;
    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;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


</head>
<body>

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

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

</body>
</html>

サイト内検索

カテゴリー

最近の投稿

« ｜スクロールでCSS「opacity」を変化させるcssとjavascript｜ »
↑上に戻る