この「JavaScript応用」では、基礎やDOM操作で学んだ知識をもとに、より実践的でデザイン性の高い動きを実装していきます。まずは、クリックで開閉する ハンバーガーメニュー の作成を通して、イベント制御とクラス操作の組み合わせを確認します。続いて、scrollY や IntersectionObserver を使い、スクロールに応じて要素を表示・非表示にしたり、セクションが見えたときにアニメーションさせる処理を体験します。
さらに、スライドショーやスライダーの作成 に取り組み、CSSとJavaScriptを組み合わせたアニメーション表現を学びます。
ライブラリ Swiper.js を使った本格的なスライダー実装も行い、外部ツールを活用する柔軟な開発スタイルも身につけます。
最後に、IntersectionObserver を応用して、スクロールに連動する パララックス表現 を作り、視覚的に印象的なWeb体験をデザインします。基礎で学んだロジックを活かしながら、実際のWebサイトでよく使われる「動き」「演出」「ライブラリ活用」を体験し、表現力と実装力をさらに高めていきましょう。
この講座を始める前に
こちらの学習を始める前に、HTML/CSS/JavaScript基礎に不安がある場合は、一度下記のトレーニングを受けておきましょう。
あわせて読みたい
HTML
HTMLとは？ Webページの「土台」をつくる言語 HTML（エイチ・ティー・エム・エル）とは、Webページの構造や中身を作るための言語です。たとえば次のようなものがHTMLで...
あわせて読みたい
CSS
CSSのカリキュラム一覧 CSSとは？ CSS（Cascading Style Sheets）は、HTMLで作った「ページの構造」に対して「見た目」を指定するための言語です。たとえば、 文字の大...
あわせて読みたい
JavaScript基礎
このJavaScript基礎講座では、Webページに動きを加えたり、条件によって処理を変えたりするための基本的なプログラミングの考え方を学びます。 まずは画面に「表示して...