【本日の学習記録】JavaScriptで動きのあるWebサイトを作成！

今日はJavaScriptを使って、スクロール時のフェードインアニメーションを実装しました！

HTML・CSS・JavaScriptはそれぞれ役割が違います。

今回は3つがどのように連携して動いているのかを整理しながら学習しました。

① HTMLで「目印（タグ）」を付ける

まずHTMLでは、JavaScriptが操作できるようにclass名を付けます。

例えば、スクロール時に表示させたいセクションには

のように

を追加します。

このfade-upが

「あとでJavaScriptから動かしますよ！」

という目印になります。

② CSSで「どんな動きをするか」を決める

次にCSSでは、

「表示前はどんな状態にするか」

「表示されたらどう変化するか」

を設定します。

例えば

これは

最初は透明（opacity:0）

少し下に配置する

0.8秒かけて変化する

という意味です。

そして

になると

不透明になる

本来の位置へ戻る

つまり

下からふわっと浮き上がるアニメーション

になります。

③ JavaScriptで「いつ動くか」を決める

最後にJavaScriptです。

JavaScriptでは

「どんなタイミングでイベントを起こすか」

を決めます。

今回は

で

HTMLの

が付いた要素をすべて取得します。

その後

を使って

画面をスクロールしたとき

要素が表示されたかどうか

を監視します。

設定している

は

要素が20％見えたら

という意味になります。

表示された瞬間に

が実行されます。

すると

CSSの

が適用され

ふわっと表示される仕組みです。

今日学んだこと

HTML・CSS・JavaScriptは、それぞれ役割が違います。

HTML：動かしたい要素に目印（class）を付ける

CSS：表示前・表示後のデザインやアニメーションを設定する

JavaScript：クリックやスクロールなど、イベントが起きたタイミングでCSSを切り替える

この3つが連携することで、ユーザーにとって見やすく、操作しやすいWebサイトを作ることができます。

少しずつですが、「動き」のあるサイトを自分で実装できるようになってきたので、引き続き学習を続けていきます！✨