AIでスクロールしたら要素がフェードインするアニメーションを作る【CSS＋JS生成】

ページをスクロールすると画面内に入ったタイミングで要素がふわっと現れる演出。サイトに動きを加えるポピュラーな手法です。Intersection Observer APIを使ってAIに生成してもらいましょう。

方法①：既存のHTMLからCSS・JSを生成する

AIへのプロンプト例

以下のHTMLの各セクションに、スクロールして画面内に入ったときに
下からフェードインするアニメーションを追加してください。
CSSとJavaScript（Intersection Observer APIを使用）で実装してください。

<section class="fade-section"><p>セクション1の内容</p></section>
<section class="fade-section"><p>セクション2の内容</p></section>
<section class="fade-section"><p>セクション3の内容</p></section>

生成されたCSS例

.fade-section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

生成されたJS例

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-visible');
      observer.unobserve(entry.target); // 一度表示したら監視解除
    }
  });
}, {
  threshold: 0.15 // 15%見えたらトリガー
});

document.querySelectorAll('.fade-section').forEach(el => observer.observe(el));

方法②：HTMLとセットで生成する

AIへのプロンプト例

スクロールで画面内に入った要素がフェードインするページをHTML・CSS・JavaScriptで作ってください。
Intersection Observer APIを使い、
・要素が下から上に出てくるアニメーション
・複数の要素が少しずつ時間差で表示される
・一度表示されたら再度スクロールしても消えない

ポイント

• 「時間差で表示したい」場合はanimation-delayの追加をリクエストしましょう
• パフォーマンスが心配な場合は「will-changeプロパティも追加して」と指定できます