Web制作 × AI

【jQuery】スクロールでページの背景色をエリア(セクション)毎に変化させる方法

コーディングテクニックの実装内容

今回はWeb制作におけるjQueryの実装の中でスクロールイベントに関する内容です。ページをスクロールして次のエリアが可視範囲に入るとページ全体の背景色を変化させるテクニックを紹介します。

コーディングテクニックの使いどころ

セクション毎に背景色を変更し、エリア(セクション)のカラーを強調したい時に効果的です。パララックスと組み合わせると更に効果的です。ちなみに、スクロールして表示領域に入ったらイベントを開始させる定番のinview.jsは使用していません。

実装難易度・必要なスキル

コーディングとjQueryの基礎的な知識があれば実務未経験のコーダー、マークアップエンジニア、Webデザイナー、エンジニア、副業の初心者など誰でも実装可能です。

実装所要時間は10分程度

スクロールでページの背景色をエリア(セクション)毎に変化させる方法の動画

CSS,JavaScriptの記述内容

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

$(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) エリア(セクション)毎に設定する色を配列に格納する。
  • 2) 各エリア(セクション)に同名のクラスを付与して(デモページではクラスblock).each()で繰り返しの処理を行う。各クラスblockがスクロールトップに到達した時の処理を指定する。
  • 3) .css()で各エリア(セクション)を囲んでいる親要素のdivへbackgroundColorを設定する。また、親要素のdivへはリッチ感をだすためにtransitionでアニメーションを指定する。
  • 4) スクロールして次のエリア(セクション)がスクロールトップへ到着した時に背景色の切り替え処理が行われる仕組み。スクロールして何回も処理が行われる仕組みは、よく利用されるfor文とifを組み合わたものを使用。
PR
[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

ChatGPT 120%活用術 [ ChatGPTビジネス研究会 ]
価格:1,390円(税込、送料無料) (2023/5/23時点)


この記事を書いた人(著者情報)

片山

カタチップ編集長。昭和生まれの30代でWeb業界歴は10年以上。現在はカタチップを運用しつつ事業会社でWEBメディアサイトのWebディレクター兼マークアップエンジニアを担当。最近はSNSの運用にも業務範囲を拡大中です。

著者画像

スポンサーリンク