jQueryでスクロール時に背景色が左右から伸びる方法

1375 回閲覧されました

公開日 : 2022年9月7日
最終更新日 : 2024年9月18日

みなさんこんにちは、jonioです。

今回は画面をスクロールした時に背景色が右から左にのびるのをjQueryで実装する方法について解説します。

なるべく理解した方がいいですが最悪コピペでもできますのでぜひサイトに実装してください。

1 実装内容
2 HTMLとCSS
3 jQuery

実装内容

画面をスクロールするとまず背景色が右から左に現れて少し遅れて文字が現れます。

背景色と文字が現れるのはクラスを付け足すことで実装しています。

それではコードの説明をしますがHTMLは簡単なので説明しません。

CSSは必要な内容のみ説明してjQueryの説明を中心にします。

HTMLとCSS

HTMLは下記になります。

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>横から背景色が伸びる</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  </head>
  <body>
    <p>スタート</p>
    <p>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓</p>
    <p>
      <span class="bgextend bgRLextendTrigger">
        <span class="bgappearTrigger">背景色が右から左に伸びる</span>
      </span>
    </p>
    <script type="text/javascript" src="js/common.js"></script>
  </body>
 </html>

CSSは下記になります。

p{
    margin:20px 10px;
    text-align: center;
    font-size:1.5rem;
}
.bgextend{
    animation-name:bgextendAnimeBase;
    animation-duration:1s;
    animation-fill-mode:forwards;
    position: relative;
    overflow: hidden;
    opacity:0;
}
  
@keyframes bgextendAnimeBase{
    from {
        opacity:0;
    }

    to {
        opacity:1;  
    }
}
.bgappear{
    animation-name:bgextendAnimeSecond;
    animation-duration:1s;
    animation-delay: 0.6s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes bgextendAnimeSecond{
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.bgRLextend::before{
    animation-name:bgRLextendAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;
}
@keyframes bgRLextendAnime{
    0% {
        transform-origin:right;
        transform:scaleX(0);
    }
    50% {
        transform-origin:right;
        transform:scaleX(1);
    }
    50.001% {
        transform-origin:left;
    }
    100% {
        transform-origin:left;
        transform:scaleX(0);
    }
}
.bgappearTrigger,.bgRLextendTrigger{
    opacity: 0;
}

それではjQueryの実装を順を追って説明します。

jQuery

まずは背景色が右から現れるのから解説しますが設定の部分です。

コードを下記にします。

$(function(){
  function BgFadeAnime(){
    $('.bgRLextendTrigger').each(function(){ 
      let elemPos = $(this).offset().top-50;
      
      let scroll = $(window).scrollTop();   
      
      let windowHeight = $(window).height();   
    });
  }
});

2行目で「BgFadeAnime()」関数にしているのは同じ操作を背景色と文字に対して行うのですが同じコードを2回書くのはコードが汚くなるからです。

3行目で「.each( )」を使っているのは今回は説明なので1つの要素に対しての操作ですが通常は1つの要素だけではなく複数の要素に対して同じ操作をするからです。

4行目の「$(this).offset().top」は画面左上から要素までの距離で、「-50」で位置の調節をしています。

6行目の「$(window).scrollTop()」はスクロールした量です。

8行目の「$(window).height()」はパソコンの画面の高さです。

次は今設定した内容を満たした時に背景色が現れるためのコードを追加しますがコードを下記にします。

$(function(){
  function BgFadeAnime(){
    $('.bgRLextendTrigger').each(function(){ 
      let elemPos = $(this).offset().top-50;
      
      let scroll = $(window).scrollTop();   
      
      let windowHeight = $(window).height();   
      
      
      //ここから追加
      if (scroll >= elemPos - windowHeight){
        $(this).addClass('bgRLextend');
      }else{
        $(this).removeClass('bgRLextend');
      }
      //ここまで追加
 
      
    });
  }
});

12行目ですが「対象の要素がパソコンの画面で見えたら」という意味です。

パソコンの画面に見えたら13行目で「bgRLextend」クラスを付けることで背景色が右から左に動くのを実現します。

「bgRLextend」クラスはCSSの111行目〜137行目ですがkeyframesで動かしています。

keyframesだけだと対象の要素の背景色が右から左に画面一杯に広がりますがCSSの83行目を使って文字がある部分の上だけ背景色が右から左に動くようにします。

15行目は（画面を上にスクロールして）対象の要素が画面から見えなくなったら「bgRLextend」クラスを外すことで背景色が左から右に戻るという意味です。

次は文字に関してですが背景色の時と考え方が全く同じなのでコードのみ記載しますが下記です。

$(function(){
  function BgFadeAnime(){
    $('.bgRLextendTrigger').each(function(){ 
      let elemPos = $(this).offset().top-50;
      
      let scroll = $(window).scrollTop();   
      
      let windowHeight = $(window).height();   
      
      if (scroll >= elemPos - windowHeight){
        $(this).addClass('bgRLextend');
      }else{
        $(this).removeClass('bgRLextend');
      }


      //ここから追加
      $('.bgappearTrigger').each(function(){ 
        let elemPos = $(this).offset().top-50;
        let scroll = $(window).scrollTop();
        let windowHeight = $(window).height();
        if (scroll >= elemPos - windowHeight){
          $(this).addClass('bgappear');
        }else{
          $(this).removeClass('bgappear');
        }
      });   
      //ここまで追加
 
      
    });
  }
});

これで画面をスクロールした時に背景色と文字が現れるのを関数化したので実行できるようにするためにコードを下記にします。

$(function(){
  function BgFadeAnime(){
    $('.bgRLextendTrigger').each(function(){ 
      let elemPos = $(this).offset().top-50;
      
      let scroll = $(window).scrollTop();   
      
      let windowHeight = $(window).height();   
      
      if (scroll >= elemPos - windowHeight){
        $(this).addClass('bgRLextend');
      }else{
        $(this).removeClass('bgRLextend');
      }

      $('.bgappearTrigger').each(function(){ 
        let elemPos = $(this).offset().top-50;
        let scroll = $(window).scrollTop();
        let windowHeight = $(window).height();
        if (scroll >= elemPos - windowHeight){
          $(this).addClass('bgappear');
        }else{
          $(this).removeClass('bgappear');
        }
      });   
    });
  }
  
  
  //ここから追加
  $(window).scroll(function (){
    BgFadeAnime();
  });
  //ここまで追加
  
  
});

31行目の「$(window).scroll」は画面をスクロールした時という意味です。

これで完成ですが最後にjQueryの完成形のコードを載せます。

$(function(){
  function BgFadeAnime(){
    $('.bgRLextendTrigger').each(function(){ 
      let elemPos = $(this).offset().top-50;
      
      let scroll = $(window).scrollTop();   
      
      let windowHeight = $(window).height();   
      
      if (scroll >= elemPos - windowHeight){
        $(this).addClass('bgRLextend');
      }else{
        $(this).removeClass('bgRLextend');
      }

      $('.bgappearTrigger').each(function(){ 
        let elemPos = $(this).offset().top-50;
        let scroll = $(window).scrollTop();
        let windowHeight = $(window).height();
        if (scroll >= elemPos - windowHeight){
          $(this).addClass('bgappear');
        }else{
          $(this).removeClass('bgappear');
        }
      });   
    });
  }
  $(window).scroll(function (){
    BgFadeAnime();
  });
});