あなたのキモチ つなげるカタチ

TOP > jQuery > 【jQuery】ページ全体の背景色をスクロールでセクション毎に変更するテクニック/Scroll change background color

【jQuery】ページ全体の背景色をスクロールでセクション毎に変更するテクニック/Scroll change background color

スポンサーリンク

実装内容

ページをスクロールして、特定のセクションエリアに入る度にページ全体の背景色を変更するテクニックを紹介します。セクション毎に背景色を変更し、セクションのカラーを強調したい時に便利かと思います。

実装所要時間:15分程度

実装方法

実装に必要なスクリプトはたったのこれだけです。

$(function(){
  var secArr = new Array();
  var current = -1;
  /* ここに背景色を順に記述する*/
  var secColor = new Array('#36ab77','#e04747', '#e7ff03', '#035fff');
  $('.block').each(function (i) {
      secArr[i] = $(this).offset().top;
  });
  function chengeBG(secNum) {
      if (secNum != current) {
          current = secNum;
          $('.block-bg').css({backgroundColor: secColor[current]});
      }
  }
  $(window).on('load scroll resize',function(){
      for (var i = secArr.length-1; i>=0; i--) {
          if ($(window).scrollTop() > secArr[i]){
              chengeBG(i);
              break;
          }
      }
  });
});

【簡単な解説】
1.各セクションに同名のクラスを付与しておき.eachで繰り返しの処理
2.セクション毎に設定する色は配列に格納
3..cssで各セクションを囲んでいる親要素のdivへbackgroundColorを設定する。また、親要素のdivへはリッチ感をだすためにstyleでtransitionを指定
4.スクロールしを行い対象セクションがスクロールトップへきた時に発火

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です