
コーディングテクニックの実装内容
今回はWeb制作におけるjQueryの実装の中でスクロールイベントに関する内容です。ページをスクロールしてセクションが可視範囲に入るとページ全体の背景色を変化させるテクニックを紹介します。
コーディングテクニックの使いどころ
セクション毎に背景色を変更し、セクションエリアのカラーを強調したい時に効果的です。パララックスと組み合わせると更に効果的です。
実装難易度・必要なスキル
コーディングと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を組み合わたものを使用。
スポンサーリンク
「【jQuery】スクロールでページの背景色をセクション毎に変化させる方法」への2件のフィードバック
コメントは受け付けていません。