JavaScriptで操作と動きを加えよう

スマートフォン用ナビゲーションと、スクロールに合わせたフェードインを実装します。最初に操作機能を完成させ、そのあとで装飾的な動きを加えます。

このLessonのゴール

• クリックイベントでメニューを開閉できる
• HTMLの状態とaria-expandedを一致させられる
• IntersectionObserverで表示領域への進入を監視できる

スマートフォンメニュー

js/main.jsでボタンを取得し、クリック時にbodyのclassを切り替えます。

const menuButton = document.querySelector(".menu-button");

menuButton?.addEventListener("click", () => {
  const isOpen = document.body.classList.toggle("menu-open");
  menuButton.setAttribute("aria-expanded", String(isOpen));
});

JavaScriptでCSSを1つずつ変更せず、JavaScriptは状態、CSSは見た目を担当する構成にします。

スクロールで表示する

HTMLで、表示したい要素にdata-revealを付けます。

<article class="menu-card" data-reveal>
  <!-- 商品内容 -->
</article>

JavaScriptでは、要素が表示領域へ入ったらis-visibleを追加します。

const revealItems = document.querySelectorAll();
 observer =  ( {
  entries.( {
     (!entry.) ;
    entry...();
    observer.(entry.);
  });
});

revealItems.( observer.(item));