JavaScriptでできることとは？
activeクラスでクリック・スクロール
アニメーションを実装する方法
この記事では、JavaScriptでできることの中から、クリックイベントとスクロールイベントで親要素にactiveクラスを付与し、CSSでアニメーションを管理する方法を解説します。JavaScriptはきっかけ作り、見た目の変化はCSSに任せる考え方を理解できます。
アニメーションを作るときは、JavaScriptですべての見た目を操作するよりも、JavaScriptは「いつ変えるか」を判断し、CSSは「どう変えるか」を担当すると考えると実装がシンプルになります。
JavaScriptでできることとactiveクラスの考え方
JavaScriptは、Webページに動きを加えるための言語です。クリックされた、スクロールされた、入力された、時間が経過した、といったユーザー操作や状態の変化をきっかけにして、HTMLのクラスを変更できます。
ただし、アニメーションの見た目までJavaScriptで細かく書きすぎると、あとから修正するときに管理が複雑になります。色、透明度、位置、表示非表示などの見た目はCSSで管理し、JavaScriptでは親のクラスやIDにactiveクラスを付与するという役割に絞ると扱いやすくなります。
JavaScriptはきっかけを作る役割
JavaScriptが得意なのは、「何が起きたか」を判断することです。ボタンがクリックされた、ページがスクロールされた、対象の要素が画面に入った、というような出来事を受け取れます。
ここで大切なのは、JavaScriptで直接アニメーションの見た目を作り込まないことです。JavaScriptはactiveクラスを付けるきっかけを作り、CSSがactiveクラスが付いた後の見た目を担当します。
まずHTMLでは、状態を持たせたい親要素と、実際に見た目を変えたい子要素を用意します。
<div class="parent">
<button type="button" class="js-button">開く</button>
<div class="child">ここがアニメーションします</div>
</div>CSSでは、通常時の見た目と、親要素にactiveが付いた後の見た目を分けて書きます。
.child {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.parent.active .child {
opacity: 1;
transform: translateY(0);
}JavaScriptでは、ボタンがクリックされたことをきっかけにして、親要素へactiveクラスを付与します。
const parent = document.querySelector('.parent');
const button = document.querySelector('.js-button');
button.addEventListener('click', () => {
parent.classList.add('active');
});この3つをつなげて見ると、クリックを判断するのはJavaScript、動き方を決めるのはCSSという役割分担がわかりやすくなります。CSS側では.parent.active .childのように書けるため、状態に応じた見た目の変化をまとめて管理できます。
activeクラスでCSSに変化を任せる
activeクラスは、「今その要素が有効な状態である」という目印です。JavaScriptでこの目印を付け、CSSで目印が付いたときのデザインを指定します。
たとえば通常時はopacity: 0;、activeが付いたらopacity: 1;にする、という形です。これならアニメーションの速度や動き方をCSSのtransitionだけで調整できます。
すべてJavaScriptで書くと管理が複雑になる理由
JavaScriptでもstyle.opacity = 1のように、見た目を直接変更することはできます。ただし、実際には対象要素を取得して、変更したいCSSプロパティを1つずつJavaScriptで指定する必要があります。少し特殊な書き方になるため、初心者には直感的に理解しづらい場面があります。
一方でCSSなら、通常時の見た目とactiveが付いた後の見た目を並べて書けます。「activeになったらこの見た目に変わる」という関係がCSSだけで読み取れるため、デザインの調整もしやすくなります。
Web制作では、状態の切り替えはJavaScript、見た目の管理はCSSと分けることで、コードの役割が明確になります。デザインを変えたいときはCSS、動作条件を変えたいときはJavaScriptを見るだけで済むため、管理もしやすくなります。
まず覚えたいのはクリックイベントとスクロールイベント
JavaScriptでできることは多いですが、Web制作のアニメーション実装で優先して覚えたいのは、クリックイベントとスクロールイベントです。
クリックイベントが分かると、メニュー、モーダル、タブ、アコーディオンなどの切り替えに対応できます。スクロールイベントが分かると、要素が画面に入ったときのフェードインや、要素を通り過ぎた後の状態変更に対応できます。まずこの2つを理解できれば、Web制作でよく使う動きの多くは十分に組み立てられます。
クリックイベントでactiveクラスを付与する
クリックイベントは、ユーザーがボタンやリンクなどを押したタイミングで処理を実行する仕組みです。メニューの開閉、モーダルの表示、アコーディオン、タブ切り替えなど、多くのUIで使います。
まず覚えたいのは、クリックされた要素そのものではなく、見た目を変えたい範囲の親要素にactiveクラスを付けることです。親に状態を持たせると、その中の複数要素をCSSでまとめて変えられます。
クリックされたらクラスを切り替える
次のJavaScriptは、ボタンをクリックしたときに親要素へactiveクラスを付け外しするコードです。toggle()は、クラスがなければ追加し、あれば削除するメソッドです。
const activeBox = document.querySelector('.js-active-box');
const activeButton = document.querySelector('.js-active-button');
activeButton.addEventListener('click', () => {
activeBox.classList.toggle('active');
});重要なのは、JavaScriptではactiveを切り替えているだけという点です。パネルをどのように表示するか、どんなアニメーションにするかはCSSで決めます。
親要素にactiveを付ける理由
親要素にactiveを付けると、CSSの指定が整理しやすくなります。たとえば.js-active-box.active .js-active-panelと書けば、「親がactiveのときだけ中のパネルを表示する」という意味になります。
これにより、ボタン、背景、テキスト、アイコンなど複数の要素を同じ状態に合わせて変更できます。個別の子要素へ何度もクラスを付けるより、状態管理がシンプルです。
クリックイベントのカスタムHTML例
次の例は、ボタンをクリックしたときに親要素へactiveクラスを付け外しする簡単な実装です。WordPressではカスタムHTMLブロックに貼ると、その場で動きを確認できます。
コードとしては、次のような形です。JavaScriptではclassList.toggle()だけを行い、見た目の変化はCSSの.click-active-demo.activeに任せています。
<div class="click-active-demo">
<style>
.click-active-demo__panel {
opacity: 0.3;
transform: translateY(16px);
transition: opacity 0.35s ease, transform 0.35s ease;
}
.click-active-demo.active .click-active-demo__panel {
opacity: 1;
transform: translateY(0);
}
</style>
<button type="button" class="js-click-active-button">クリックでactiveを切り替え</button>
<div class="click-active-demo__panel">親要素にactiveクラスが付くと表示が変わります。</div>
<script>
(() => {
const root = document.currentScript.closest('.click-active-demo');
const button = root.querySelector('.js-click-active-button');
button.addEventListener('click', () => {
root.classList.toggle('active');
});
})();
</script>
</div>スクロールイベントでactiveクラスを付与する
スクロールイベントは、ページがスクロールされたタイミングで処理を実行する仕組みです。要素が画面に入ったらフェードインする、特定の位置を通過したら固定表示する、セクションごとにナビゲーションを切り替える、といった実装で使います。
特に大切なのは、「要素が画面に入ったら」だけでなく、要素の下を通り過ぎたらという条件も指定できることです。この考え方がわかると、スクロールに合わせた演出や状態変更をかなり作りやすくなります。
要素が画面に入ったらactiveを付ける
要素の位置を調べるときはgetBoundingClientRect()を使います。これは、要素が画面内のどの位置にあるかを取得するメソッドです。たとえばrect.topは、要素の上端が画面上端から何pxの位置にあるかを表します。
const scrollBox = document.querySelector('.js-scroll-box');
const passBox = document.querySelector('.js-pass-box');
const updateActiveState = () => {
const scrollRect = scrollBox.getBoundingClientRect();
const passRect = passBox.getBoundingClientRect();
if (scrollRect.top < window.innerHeight * 0.75) {
scrollBox.classList.add('active');
} else {
scrollBox.classList.remove('active');
}
if (passRect.bottom < window.innerHeight * 0.65) {
passBox.classList.add('active');
} else {
passBox.classList.remove('active');
}
};
window.addEventListener('scroll', updateActiveState, { passive: true });
window.addEventListener('resize', updateActiveState);
updateActiveState();scrollRect.top < window.innerHeight * 0.75は、
「要素の上端が、画面の高さ75%の位置より上に来たら」という意味です。
条件に合うときはactiveを付け、
上へ戻って条件から外れたときはactiveを外します。
これにより、一度きりではなく、スクロールのたびに再度アニメーションできるようになります。
コードだけを見ると少し複雑に感じますが、
実際には AI へ
「○○の要素の上を通り過ぎたら active を付けたい」
というように、日本語で意図を伝えられれば問題ありません。
大切なのは、コードを丸暗記することよりも、
「どのタイミングで、どの要素に、何をしたいか」を言語化できることです。
要素の下を通り過ぎたらactiveを付ける
passRect.bottom < window.innerHeight * 0.65は、「要素の下端が画面の高さ65%の位置より上に来たら」という意味です。上端ではなく下端を見ることで、要素の下を通り過ぎたタイミングを条件にできます。条件から外れたときにactiveを削除すれば、戻ったときに状態がリセットされます。
この考え方は、スクロール連動のアニメーションでとても重要です。たとえば「見出しを通過したらナビゲーションを切り替える」「カードの下まで読まれたら次の演出を出す」といった指示ができるようになります。
※ライブラリを活用してスクロールアニメーションを実装する方法を知りたい場合は、こちらの記事も参考になります。
スクロールイベントの例
次の例では、要素が画面に入ったときと、要素の下を通り過ぎたときの2つの条件でactiveクラスを付け外しします。戻ったときにactiveが外れるため、再度スクロールするともう一度アニメーションします。
<div class="scroll-active-demo">
<style>
.scroll-active-demo__item {
opacity: 0.3;
transform: translateY(20px);
transition: opacity 0.35s ease, transform 0.35s ease;
}
.scroll-active-demo__item.active {
opacity: 1;
transform: translateY(0);
}
.scroll-active-demo__spacer {
min-height: 180px;
}
</style>
<div class="scroll-active-demo__spacer">下へスクロール</div>
<div class="scroll-active-demo__item js-scroll-active-in">
要素が画面の75%位置に入ったらactiveになり、戻るとactiveが外れます。
</div>
<div class="scroll-active-demo__spacer">さらに下へスクロール</div>
<div class="scroll-active-demo__item js-scroll-active-pass">
要素の下端が画面の65%位置を通り過ぎたらactiveになり、戻るとactiveが外れます。
</div>
<script>
(() => {
const demos = document.querySelectorAll('.scroll-active-demo');
demos.forEach((root) => {
if (root.dataset.activeDemoReady === 'true') {
return;
}
root.dataset.activeDemoReady = 'true';
const inItem = root.querySelector('.js-scroll-active-in');
const passItem = root.querySelector('.js-scroll-active-pass');
const updateActiveState = () => {
const inRect = inItem.getBoundingClientRect();
const passRect = passItem.getBoundingClientRect();
if (inRect.top < window.innerHeight * 0.75) {
inItem.classList.add('active');
} else {
inItem.classList.remove('active');
}
if (passRect.bottom < window.innerHeight * 0.65) {
passItem.classList.add('active');
} else {
passItem.classList.remove('active');
}
};
window.addEventListener('scroll', updateActiveState, { passive: true });
window.addEventListener('resize', updateActiveState);
updateActiveState();
});
})();
</script>
</div>AIを活用する
コードを理解することも大切ですが、
AIを活用して「どのような指示を出せるか」を知ることも非常に重要です。
例えば、
「この要素が画面の下を通り過ぎたら、別の要素に active クラスを付与したい」
といったように、
“実現したい動き” を具体的に伝えられるようになることで、AIをより実務的に活用できるようになります。
特に現在は、
「コードをすべて暗記する」よりも、
- どんな表現ができるのか
- どんな動きが実装可能なのか
- それをどう言語化するのか
を理解することが、とても重要になってきています。
まとめ
- JavaScriptはクリックやスクロールなど、変化のきっかけを作る役割が得意
- アニメーションの見た目はCSSで管理し、JavaScriptでは親要素にactiveクラスを付けるとシンプルになる
- クリックイベントでは、ボタン操作に合わせて親要素のactiveクラスを付け外しできる
- スクロールイベントでは、条件に応じてactiveクラスを付け外しすると、戻ったときにも再度アニメーションできる
- AIに依頼するときも、「どの条件で、どの親要素にactiveを付けるか」を伝えられると実装が安定しやすい
