第9回: 高度なアニメーションと演出

この回の目標

  • CSSアニメーションの基本を使える
  • フェード・スライドなど自然な演出を入れられる
  • 見た目のクオリティを一段上げられる
目次
  1. 見出し1
  2. 見出し2
    1. 見出し2-1
    2. 見出し2-2

① なぜアニメーションを入れるのか

  • 目線誘導
  • 強調
  • 離脱防止

アニメーションは装飾ではなく「役割」。

② CSSアニメーションの基礎

transition


.button {
  transition: 0.3s;
}

hover演出


.button:hover {
  transform: translateY(-5px);
  opacity: 0.8;
}

transform と opacity は軽くておすすめ。

③ よく使う演出パターン

ボタンhover


.button:hover {
  transform: scale(1.05);
}

カードhover


.card:hover {
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

フェードイン（簡易版）


.fade {
  opacity: 0;
  transform: translateY(20px);
  transition: 0.6s;
}

.fade.show {
  opacity: 1;
  transform: translateY(0);
}

④ スクロール連動アニメーション

クラス付与型で実装するのが基本。 


const fades = document.querySelectorAll(".fade");

window.addEventListener("scroll", function() {
  fades.forEach(function(fade) {
    const position = fade.getBoundingClientRect().top;
    const windowHeight = window.innerHeight;

    if (position < windowHeight - 100) {
      fade.classList.add("show");
    }
  });
});

すべて自作する必要はない。 ライブラリ使用もOK。

⑤ やってはいけない演出

  • 動きすぎる
  • 文字が読めない
  • 処理が重い

目的を忘れた演出は逆効果。

⑥ LPにどう組み込むか

  • ファーストビューのCTA
  • 重要ボタン
  • セクション切り替え

全部に入れない。 必要な場所だけ。

⑦ ミニ課題

  • ボタンにhover演出を追加
  • フェードインを1箇所入れる

「派手」ではなく「意味のある動き」を意識。

この回のまとめ

  • アニメーションは役割を持たせる
  • transformとopacityが基本
  • スクロール連動はクラス付与型
  • やりすぎない