スクロール位置でアニメ発火！jQueryで特定クラスを追加する方法
目的：ページの特定位置にスクロールしたときに、アニメーションで要素を表示する。
使用技術：jQuery（スクロールイベント監視）、CSS（アニメーション）、クラス操作（addClass）。
主な用途：商品紹介、LP（ランディングページ）のアニメーション、スクロール型プレゼンなど。
目次
スクロール連動アニメーション実装例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スクロールアニメーションのデモ</title>
<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.section {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
background: #f0f0f0;
border-bottom: 1px solid #ccc;
}
/* アニメーションの初期状態 */
.common-animate-item {
transition: all 0.6s ease;
opacity: 0;
transform: translateY(50px);
}
/* アニメーションが発動した状態 */
.common-animate-item.animate-in {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body>
<div class="section">スクロールしてください 👇</div>
<div class="section common-animate-item">アニメーション要素 1</div>
<div class="section common-animate-item">アニメーション要素 2</div>
<div class="section common-animate-item">アニメーション要素 3</div>
<div class="section common-animate-item">アニメーション要素 4</div>
<!-- jQueryの読み込み -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// スクロールイベントのスロットル処理（負荷軽減）
function throttle(fn, wait) {
let lastTime = 0;
return function () {
let now = new Date().getTime();
if (now - lastTime > wait) {
fn.apply(this, arguments);
lastTime = now;
}
};
}
// アニメーション対象に初期クラスを追加
function initAnimateItems() {
$(".common-animate-item").each(function () {
$(this).addClass("normalmove");
});
}
// スクロール時にアニメーションを実行
function handleScrollAnimation() {
$(".common-animate-item.normalmove").each(function () {
const $el = $(this);
const triggerPoint = $(window).height() * 0.75;
const scrollTop = $(window).scrollTop();
const offsetTop = $el.offset().top;
if (scrollTop > offsetTop - triggerPoint) {
$el.removeClass("normalmove").addClass("animate-in");
}
});
}
// 初期化処理とイベントの設定
$(function () {
initAnimateItems();
handleScrollAnimation(); // 最初に表示されている要素にも対応
$(window).on("scroll", throttle(handleScrollAnimation, 100));
});
</script>
</body>
</html>注意点・補足
- パフォーマンスへの影響：
scrollイベントは頻繁に発火するため、throttle（スロットル）や debounce（デバウンス）処理を加えるとよいです。 - モバイル対応：古いスマートフォンブラウザでは動作が不安定な場合があるので、テストが必要です。
- 一度だけ実行する工夫：状態フラグや「once」クラスなどで、繰り返し処理されないよう制御するのがポイントです。
- トリガーのタイミング調整：発動位置を調整することで、アニメーションの見逃しを防げます。
Web制作現場でよくある質問（FAQ）
Q1: この機能にはプラグインが必要ですか？
A: 必須ではありません。シンプルな jQuery のスクリプトだけで実装可能ですが、AOS.js などのライブラリを使うと効率的です。
Q2: 特定の要素に到達したかどうかはどう判断しますか？
A: $(window).scrollTop() と、対象要素の .offset().top を比較することで判断できます。
Q3: アニメーションは一度だけ実行されますか？
A: 通常はスクロールのたびに判定されます。1回だけ実行したい場合は、状態を記録したり、クラス追加後に処理を止める方法があります。
まとめ
jQuery を使ってスクロールに応じてクラスを追加することで、要素の登場アニメーションを簡単に実装できます。シンプルかつ直感的な方法で、小〜中規模のプロジェクトや短期間で視覚効果を加えたい場面に適しています。ユーザー体験を高めるためには、処理の最適化や適切なトリガー設定が重要です。
関連記事
