LPの動きは、内容を理解しやすくしたり、操作結果を伝えたりするために追加します。装飾のために動きを増やし、読むまで待たせたり操作を妨げたりしないでください。
この教材ではjQueryを前提にせず、ブラウザ標準のJavaScriptで実装します。
最初に必要な動きを一覧にする
- スマートフォンメニューの開閉
- ページ内リンクへの移動
- スクロールした要素の表示
- フォーム入力や送信結果の通知
CSSだけで実現できる状態変化と、JavaScriptが必要な処理を分けます。動きがなくても重要な文章とリンクへアクセスできる構造を先に作ります。
次の図では、「最初に必要な動きを一覧にする」の仕組みや関係を確認できます。
メニューの開閉状態を管理する
メニューを開いた状態では、移動先が読みやすく、閉じる操作も判断できるようにします。
const menuButton = document.querySelector(".menu-button");
const menu = document.querySelector(".global-nav");
if (menuButton && menu) {
menuButton.addEventListener("click", () => {
const isOpen = menuButton.getAttribute("aria-expanded") === "true";
menuButton.setAttribute("aria-expanded", String(!isOpen));
menu.classList.toggle("is-open", !isOpen);
});
}見た目のクラスだけでなく、ボタンのaria-expandedも更新します。開いている間のフォーカス移動やEscapeキーで閉じる必要がある構成かも確認します。
表示領域へ入ったことを検知する
スクロール演出は、内容を隠したままにせず短い変化で完成状態へ移します。
Intersection Observerを使うと、対象要素が画面へ入ったときに処理を実行できます。すべてのスクロール位置を常時計算する処理を自作せず、ブラウザの仕組みを使います。
const targets = document.querySelectorAll(".js-reveal");
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) return;
entry.target.classList.add("is-visible");
observer.unobserve(entry.target);
});
}, { threshold: 0.2 });
targets.forEach((target) => observer.observe(target));動きを減らす設定へ対応する
ユーザーが端末で動きを減らす設定を有効にしている場合は、大きな移動や長いアニメーションを止めます。
次の画像は、「動きを減らす設定へ対応する」で扱うコードや構成をブラウザで表示した結果です。
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}繰り返し操作して確認する
次の図では、「繰り返し操作して確認する」の仕組みや関係を確認できます。
- マウス、キーボード、タッチで操作する
- 開く・閉じるを複数回繰り返す
- 画面幅を変更した後も状態が破綻しないか確認する
- JavaScriptを無効にして主要内容を確認する
- Consoleにエラーがないか確認する