JavaScript応用

この「JavaScript応用」では、基礎やDOM操作で学んだ知識をもとに、より実践的でデザイン性の高い動きを実装していきます。まずは、クリックで開閉する ハンバーガーメニュー の作成を通して、イベント制御とクラス操作の組み合わせを確認します。続いて、scrollY や IntersectionObserver を使い、スクロールに応じて要素を表示・非表示にしたり、セクションが見えたときにアニメーションさせる処理を体験します。

さらに、スライドショーやスライダーの作成 に取り組み、CSSとJavaScriptを組み合わせたアニメーション表現を学びます。
ライブラリ Swiper.js を使った本格的なスライダー実装も行い、外部ツールを活用する柔軟な開発スタイルも身につけます。

最後に、IntersectionObserver を応用して、スクロールに連動する パララックス表現 を作り、視覚的に印象的なWeb体験をデザインします。基礎で学んだロジックを活かしながら、実際のWebサイトでよく使われる「動き」「演出」「ライブラリ活用」を体験し、表現力と実装力をさらに高めていきましょう。