要素がビューポートに入っている間だけ、何かのcssを当てたいときって結構ありますよね。
今回はいい感じにクラスをつけるjsが書けたので備忘録。
クラスをつけるコードなので、今回は背景色を変更していますが、その他の制御ももちろん可能です。
文字色変えたり画像動かしたり…
いろんなことに使ってみてください。
まずはコードから
See the Pen 要素がビューポートの中にあるときだけ背景色を変更する by 東野江里 (@anyxfbuk-the-scripter) on CodePen.
ビューポートに入ったときだけ背景色を変更しているのがわかると思います。
解説
html
<div class="bg-area">
<h1 style="color:#eee;">ここが背景色変更エリア</h1>
</div>特記事項は特にないです。
今回はbg-areaクラスをつけてcss、jsで制御しています。
css
.bg-area {
transition: all .5s;
}
.bg-area.show {
background-color: #000;
}背景色変更の動きを滑らかにするのにtransitionを.5秒に設定しています。
また、showクラスがついたら背景色を変更するようなコードを書きました。
この部分を編集すれば、文字色を変えたり、画像を表示させたり、いろいろできると思います。
js
1.showClassの定義
(function(){
const showClass = "show"; // 表示効果を示すクラス名として"show"を定義showClassは、要素が画面上で可視状態になった時に付与されるクラスです。このクラスが追加されると、CSSで定義されたアニメーションやスタイルが適用されることを想定しています。
2..bg-area要素に対する処理
$(".bg-area").each(function(index, content){ページ内の全ての.bg-area要素に対して、ループ処理が行われます。eachメソッドを使って、それぞれの要素（content）に対する処理が設定されます。
3.イベントのバインド
$(window).on("load scroll resize", function(){ウィンドウのload、scroll、resizeの各イベントに対して同じ処理が実行されます。これにより、ページロード時やスクロール、ウィンドウサイズ変更時に、要素が表示領域に入ったかどうかを判定する処理が走ります。
4.表示開始・終了タイミングの計算
const windowHeight = $(window).height(); // ウィンドウの高さを取得
const scroll = $(window).scrollTop(); // 現在のスクロール位置を取得
const offset = $(content).offset().top; // 各".bg-area"要素の位置を取得
const setTiming = windowHeight * 0.5; // 表示開始タイミングをウィンドウの高さの50%に設定
const contentHeight = $(content).height(); // 各".bg-area"要素の高さを取得
const outTiming = windowHeight * 0.8; // 表示終了タイミングをウィンドウの高さの80%に設定windowHeight: ウィンドウの高さを取得。
scroll: 現在のスクロール位置を取得。
offset: 各.bg-area要素のページ内の位置を取得。
setTiming: ウィンドウの高さの50%を表示開始の基準タイミングとして計算します。これにより、要素がウィンドウの中央に来るあたりで表示を開始するようになります。ここを0.5から変更すると、開始タイミングを調整することができます。
contentHeight: 各.bg-area要素の高さ。
outTiming: ウィンドウの高さの80%を表示終了のタイミングとして計算。ここを0.8から変更すると、終了タイミングを調整することができます。
5.表示・非表示の判定
// 表示開始・終了条件の判定
if (scroll + windowHeight >= offset + setTiming && scroll + windowHeight < offset + contentHeight + outTiming) {
// ウィンドウが要素の表示範囲に入った場合
$(content).addClass(showClass); // "show"クラスを追加して表示
} else {
// 表示範囲外の場合
$(content).removeClass(showClass); // "show"クラスを削除して非表示
}
});
});
});ウィンドウのスクロール位置と高さが要素のoffsetとsetTiming（表示開始）およびcontentHeightとoutTiming（表示終了）に基づいて比較されます。
条件を満たす場合、showClass（ここではshow）が要素に追加され、要素が表示されます。条件を満たさない場合は、showクラスが削除されて非表示になります。
以上のコードで、ユーザーがスクロールする際に特定の要素（.bg-area）が表示領域内に入ったときにshowクラスが追加され、アニメーションやスタイル変更が発動し、スクロールで再度要素が画面外に出るとクラスが削除され、視覚効果がリセットされます。
まとめ
ユーザーがスクロールする際に特定の要素が表示領域内に入ったときにクラスを追加することでアニメーションやスタイル変更が発動し、スクロールで再度要素が画面外に出るとクラスが削除され、視覚効果をリセットする、というコードを書きました。
日常業務でもよく使うアニメーション化と思いますので、ぜひ使ってみてください。
もしわからないことあれば質問ください！
記事にしてほしい・解説してほしい内容のリクエストもお待ちしています。