フェードイン – ケケンタの独学ITブログ https://kekenta-it-blog.com プログラミングやWeb制作の情報を発信 Wed, 06 Aug 2025 06:05:08 +0000 ja hourly 1 https://wordpress.org/?v=7.0 https://kekenta-it-blog.com/wp-content/uploads/2023/07/cropped-KEKENTA-BLOG-32x32.png フェードイン – ケケンタの独学ITブログ https://kekenta-it-blog.com 32 32 【コピペOK】フェードイン系アニメーション｜6種類【Web制作】 https://kekenta-it-blog.com/fade-in-animations-complete-guide/ https://kekenta-it-blog.com/fade-in-animations-complete-guide/#respond Sun, 13 Jul 2025 05:45:44 +0000 https://kekenta-it-blog.com/?p=15270

今回はこのようなお悩みをお持ちの方へ向けて Web制作において人気の高いアニメーション効果フェードイン系アニメーション をご紹介します。 6種類のフェードイン効果を完全網羅した実装なので、いままさに「アニメーション効果を […]]]>

ケケンタ

CSSでフェードイン効果を実装したい……

ケケンタ

ページ読み込み時に要素をスムーズに表示させたい……

今回はこのようなお悩みをお持ちの方へ向けて

Web制作において人気の高いアニメーション効果
フェードイン系アニメーション

をご紹介します。

6種類のフェードイン効果を完全網羅した実装なので、いままさに「アニメーション効果を実装しないといけない！」という方は丸っとコピペしてどうぞご活用ください！

この記事で紹介するフェードイン系アニメーション
  • 基本的なフェードイン（シンプルで高パフォーマンス）
  • スライドイン（上下左右の方向指定可能）
  • ズームイン（注目を集める効果大）
  • バウンスイン（楽しい印象を与える）
  • フリップイン（3D効果で視覚的インパクト大）
  • スケールイン（変形しながら登場）

特にページ読み込み時の要素表示やスクロール時のアニメーションには、フェードイン系の効果が非常に効果的です。この記事のコードをご活用いただきWeb制作の効率化に繋がれば何よりです。

おすすめ記事

【コピペOK】背景アニメーション｜5種類【Web制作】
【コピペOK】文字が１つずつ表示！タイプライターの実装【HTML/CSS】
【コピペOK】ボタン・リンク系アニメーション｜7種類【Web制作】

フェードイン系アニメーションとは

フェードイン系アニメーションは、要素が画面に登場する際の基本的なアニメーション効果です。ユーザーの注目を集め、ページの視覚的な魅力を向上させる効果的な手法です。

効果的な使用場面

適している場面

  • ランディングページのメインコンテンツ
  • ポートフォリオサイトの作品紹介
  • ブログ記事の見出しや画像
  • モーダルウィンドウの表示
  • スクロール時の要素表示

避けるべき場面

  • 頻繁に更新されるコンテンツ
  • 重要な情報の表示（遅延が問題になる場合）
  • アクセシビリティを重視する場面

実装方法の比較

アニメーション難易度視覚的インパクトパフォーマンスブラウザ対応
フェードイン⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
スライドイン⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
ズームイン⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
バウンスイン⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
フリップイン⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
スケールイン⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐

基本的なフェードイン

① デモ

See the Pen フェードイン by ケケンタ (@lgshifbg-the-looper) on CodePen.

このフェードインの特徴
  • シンプルで分かりやすい実装
  • 高いパフォーマンス
  • すべてのブラウザで対応

② HTML

<!-- スクロールテスト用の上部スペース -->
<div style="height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white;">
  <h1>スクロールしてフェードインを確認</h1>
</div>

<!-- フェードイン要素 -->
<div class="fade-in-element">
  <h2>フェードイン効果</h2>
  <p>この要素がフェードインで表示されます。</p>
</div>

<!-- スクロールテスト用の下部スペース -->
<div style="height: 100vh; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); display: flex; align-items: center; justify-content: center; color: white;">
  <h1>フェードインが完了</h1>
</div>

特別なHTMLは不要です。通常の要素にCSSクラスを適用するだけでフェードインア二メーションが実行できます。

③ CSS

.fade-in-element {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

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

animationではなくtransitionを使用することで、スクロール時の発火制御が可能になります。初期状態では少し下にずらして配置し、表示時に元の位置に移動させます。

④ JavaScript（スクロール発火制御）

// Intersection Observer APIを使用したスクロール発火制御
const observerOptions = {
  threshold: 0.1, // 要素の10%が見えたら発火
  rootMargin: '0px 0px -50px 0px' // 下から50px手前で発火
};

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('show');
    }
  });
}, observerOptions);

// フェードイン要素を監視
document.addEventListener('DOMContentLoaded', function() {
  const fadeElements = document.querySelectorAll('.fade-in-element');
  fadeElements.forEach(el => observer.observe(el));
});

⑤ カスタマイズ例

/* 遅いフェードイン */
.fade-in-slow {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 2s ease-in-out, transform 2s ease-in-out;
}

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

/* 速いフェードイン */
.fade-in-fast {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

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

/* バウンス付きフェードイン */
.fade-in-bounce {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease-in-out, transform 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

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

スライドイン

① デモ

See the Pen スライドイン by ケケンタ (@lgshifbg-the-looper) on CodePen.

このスライドインの特徴
  • 方向を指定可能（上下左右）
  • 自然な動きで視覚的インパクト大
  • レスポンシブ対応

② HTML

<!-- スクロールテスト用の上部スペース -->
<div style="height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white;">
  <h1>スクロールしてスライドインを確認</h1>
</div>

<!-- スライドイン要素 -->
<div class="slide-in-left">
  <h2>左からスライドイン</h2>
</div>

<div style="height: 50vh; background: #f8f9fa; display: flex; align-items: center; justify-content: center;">
  <p>スクロール継続中...</p>
</div>

<div class="slide-in-right">
  <h2>右からスライドイン</h2>
</div>

<div style="height: 50vh; background: #e9ecef; display: flex; align-items: center; justify-content: center;">
  <p>スクロール継続中...</p>
</div>

<div class="slide-in-up">
  <h2>下からスライドイン</h2>
</div>

<div style="height: 50vh; background: #dee2e6; display: flex; align-items: center; justify-content: center;">
  <p>スクロール継続中...</p>
</div>

<div class="slide-in-down">
  <h2>上からスライドイン</h2>
</div>

<!-- スクロールテスト用の下部スペース -->
<div style="height: 100vh; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); display: flex; align-items: center; justify-content: center; color: white;">
  <h1>すべてのスライドインが完了</h1>
</div>

③ CSS

/* 左からスライドイン */
.slide-in-left {
  opacity: 0;
  transform: translateX(-100px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}
.slide-in-left.show {
  opacity: 1;
  transform: translateX(0);
}

/* 右からスライドイン */
.slide-in-right {
  opacity: 0;
  transform: translateX(100px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.slide-in-right.show {
  opacity: 1;
  transform: translateX(0);
}

/* 下からスライドイン */
.slide-in-up {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.slide-in-up.show {
  opacity: 1;
  transform: translateY(0);
}

/* 上からスライドイン */
.slide-in-down {
  opacity: 0;
  transform: translateY(-100px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.slide-in-down.show {
  opacity: 1;
  transform: translateY(0);
}

④ JavaScript

// スライドイン要素のみを監視
document.addEventListener('DOMContentLoaded', function() {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('show');
      }
    });
  }, {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
  });
  document.querySelectorAll('.slide-in-left, .slide-in-right, .slide-in-up, .slide-in-down, .slide-in-diagonal, .slide-in-delayed').forEach(el => observer.observe(el));
});

⑤ カスタマイズ例

/* 斜めスライドイン */
.slide-in-diagonal {
  opacity: 0;
  transform: translate(-100px, -100px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.slide-in-diagonal.show {
  opacity: 1;
  transform: translate(0, 0);
}

/* 遅延付きスライドイン（JavaScriptで制御） */
.slide-in-delayed {
  opacity: 0;
  transform: translateX(-100px);
  transition: opacity 1s ease-out 0.5s, transform 1s ease-out 0.5s;
}

.slide-in-delayed.show {
  opacity: 1;
  transform: translateX(0);
}

ズームイン

① デモ

See the Pen ズームイン by ケケンタ (@lgshifbg-the-looper) on CodePen.

このズームインの特徴
  • 要素が小さく縮小された状態から拡大
  • 注目を集める効果が高い
  • 3D効果も追加可能

② HTML

<!-- スクロールテスト用の上部スペース -->
<div style="height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white;">
  <h1>スクロールしてズームインを確認</h1>
</div>

<!-- ズームイン要素 -->
<div class="zoom-in-element">
  <h2>ズームイン効果</h2>
  <p>この要素が小さく縮小された状態から拡大します。</p>
</div>

<!-- スクロールテスト用の下部スペース -->
<div style="height: 100vh; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); display: flex; align-items: center; justify-content: center; color: white;">
  <h1>ズームインが完了</h1>
</div>

③ CSS

.zoom-in-element {
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 1s ease-out, transform 1s ease-out;
}
.zoom-in-element.show {
  opacity: 1;
  transform: scale(1);
}

④ JavaScript

// ズームイン要素のみを監視
document.addEventListener('DOMContentLoaded', function() {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('show');
      }
    });
  }, {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
  });
  document.querySelectorAll('.zoom-in-element, .zoom-in-bounce, .zoom-in-3d').forEach(el => observer.observe(el));
});

⑤ カスタマイズ例

/* バウンス付きズームイン */
.zoom-in-bounce {
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 1s ease-out, transform 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.zoom-in-bounce.show {
  opacity: 1;
  transform: scale(1.05);
}

.zoom-in-bounce.show.final {
  transform: scale(1);
}

/* 3Dズームイン */
.zoom-in-3d {
  opacity: 0;
  transform: scale(0.3) rotateX(45deg);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.zoom-in-3d.show {
  opacity: 1;
  transform: scale(1) rotateX(0deg);
}

バウンスイン

① デモ

See the Pen バウンスイン by ケケンタ (@lgshifbg-the-looper) on CodePen.

このバウンスインの特徴
  • 要素が跳ねながら登場
  • 楽しい印象を与える
  • 子供向けサイトやカジュアルなサイトに適している

② HTML

<!-- スクロールテスト用の上部スペース -->
<div style="height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white;">
  <h1>スクロールしてバウンスインを確認</h1>
</div>

<!-- バウンスイン要素 -->
<div class="bounce-in-element">
  <h2>バウンスイン効果</h2>
  <p>この要素が跳ねながら登場します。</p>
</div>

<!-- スクロールテスト用の下部スペース -->
<div style="height: 100vh; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); display: flex; align-items: center; justify-content: center; color: white;">
  <h1>バウンスインが完了</h1>
</div>

③ CSS

.bounce-in-element {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.bounce-in-element.show {
  opacity: 1;
  transform: translateY(-20px);
}
.bounce-in-element.show.final {
  transform: translateY(0);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

④ JavaScript

// バウンスイン要素のみを監視し、2段階アニメーション
document.addEventListener('DOMContentLoaded', function() {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('show');
        setTimeout(() => {
          entry.target.classList.add('final');
        }, 600); // バウンス効果をより長く表示
      }
    });
  }, {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
  });
  document.querySelectorAll('.bounce-in-element, .bounce-in-down, .bounce-in-left').forEach(el => observer.observe(el));
});

⑤ カスタマイズ例

/* 上からバウンスイン */
.bounce-in-down {
  opacity: 0;
  transform: translateY(-100px);
  transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.bounce-in-down.show {
  opacity: 1;
  transform: translateY(20px);
}

.bounce-in-down.show.final {
  transform: translateY(0);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 左右バウンスイン */
.bounce-in-left {
  opacity: 0;
  transform: translateX(-100px);
  transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.bounce-in-left.show {
  opacity: 1;
  transform: translateX(20px);
}

.bounce-in-left.show.final {
  transform: translateX(0);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 右からバウンスイン */
.bounce-in-right {
  opacity: 0;
  transform: translateX(100px);
  transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.bounce-in-right.show {
  opacity: 1;
  transform: translateX(-20px);
}

.bounce-in-right.show.final {
  transform: translateX(0);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

フリップイン

① デモ

See the Pen フリップイン by ケケンタ (@lgshifbg-the-looper) on CodePen.

このフリップインの特徴
  • 要素が回転しながら登場
  • 3D効果で視覚的インパクト大
  • カードや画像に特に効果的

② HTML

<!-- スクロールテスト用の上部スペース -->
<div style="height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white;">
  <h1>スクロールしてフリップインを確認</h1>
</div>

<!-- フリップイン要素 -->
<div class="flip-in-element">
  <h2>フリップイン効果</h2>
  <p>この要素が回転しながら登場します。</p>
</div>

<!-- スクロールテスト用の下部スペース -->
<div style="height: 100vh; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); display: flex; align-items: center; justify-content: center; color: white;">
  <h1>フリップインが完了</h1>
</div>

③ CSS

.flip-in-element {
  opacity: 0;
  transform: perspective(1000px) rotateY(450deg) scale(0.8);
  transition: opacity 2s ease-out, transform 2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform-origin: center;
  backface-visibility: hidden;
  width: fit-content;
}
.flip-in-element.show {
  opacity: 1;
  transform: perspective(1000px) rotateY(0deg) scale(1);
}

④ JavaScript

// フリップイン要素のみを監視
document.addEventListener('DOMContentLoaded', function() {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('show');
      }
    });
  }, {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
  });
  document.querySelectorAll('.flip-in-element, .flip-in-x, .flip-in-complex').forEach(el => observer.observe(el));
});

⑤ カスタマイズ例

/* X軸回転フリップイン */
.flip-in-x {
  opacity: 0;
  transform: perspective(1000px) rotateX(450deg) scale(0.8);
  transition: opacity 2s ease-out, transform 2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  backface-visibility: hidden;
  width: fit-content;
}

.flip-in-x.show {
  opacity: 1;
  transform: perspective(1000px) rotateX(0deg) scale(1);
}

/* 複合回転フリップイン */
.flip-in-complex {
  opacity: 0;
  transform: perspective(1000px) rotateX(450deg) rotateY(450deg) scale(0.8);
  transition: opacity 2.5s ease-out, transform 2.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  backface-visibility: hidden;
  width: fit-content;
}

.flip-in-complex.show {
  opacity: 1;
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale(1);
}

/* 斜め回転フリップイン */
.flip-in-diagonal {
  opacity: 0;
  transform: perspective(1000px) rotateX(450deg) rotateZ(405deg) scale(0.8);
  transition: opacity 2.2s ease-out, transform 2.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  backface-visibility: hidden;
  width: fit-content;
}

.flip-in-diagonal.show {
  opacity: 1;
  transform: perspective(1000px) rotateX(0deg) rotateZ(0deg) scale(1);
}

/* 左右フリップイン */
.flip-in-left {
  opacity: 0;
  transform: perspective(1000px) rotateY(450deg) scale(0.8);
  transition: opacity 2s ease-out, transform 2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform-origin: left center;
  backface-visibility: hidden;
  width: fit-content;
}

.flip-in-left.show {
  opacity: 1;
  transform: perspective(1000px) rotateY(0deg) scale(1);
}

/* 右からフリップイン */
.flip-in-right {
  opacity: 0;
  transform: perspective(1000px) rotateY(-450deg) scale(0.8);
  transition: opacity 2s ease-out, transform 2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform-origin: right center;
  backface-visibility: hidden;
  width: fit-content;
}

.flip-in-right.show {
  opacity: 1;
  transform: perspective(1000px) rotateY(0deg) scale(1);
}

スケールイン

① デモ

See the Pen スケールイン by ケケンタ (@lgshifbg-the-looper) on CodePen.

このスケールインの特徴
  • 要素が変形しながら登場
  • ユニークな視覚効果
  • 特定の要素を強調したい場合に効果的

② HTML

<div style="height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white;">
  <h1>スクロールしてスケールインを確認</h1>
</div>

<!-- スケールイン要素 -->
<div class="scale-in-element">
  <h2>スケールイン効果</h2>
  <p>この要素が変形しながら登場します。</p>
</div>

<!-- スクロールテスト用の下部スペース -->
<div style="height: 100vh; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); display: flex; align-items: center; justify-content: center; color: white;">
  <h1>スケールインが完了</h1>
</div>

③ CSS

.scale-in-element {
  opacity: 0;
  transform: scale(0) rotate(720deg) skew(45deg, 45deg);
  transition: opacity 1.5s ease-out, transform 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform-origin: center;
  width: fit-content;
}
.scale-in-element.show {
  opacity: 1;
  transform: scale(1) rotate(0deg) skew(0deg, 0deg);
}

④ JavaScript

// スケールイン要素のみを監視
document.addEventListener('DOMContentLoaded', function() {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('show');
      }
    });
  }, {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
  });
  document.querySelectorAll('.scale-in-element, .scale-in-ellipse, .scale-in-spiral').forEach(el => observer.observe(el));
});

⑤ カスタマイズ例

/* 楕円スケールイン */
.scale-in-ellipse {
  opacity: 0;
  transform: scaleX(0) scaleY(0) skew(30deg, 30deg);
  transition: opacity 1.5s ease-out, transform 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform-origin: center;
  width: fit-content;
}

.scale-in-ellipse.show {
  opacity: 1;
  transform: scaleX(1) scaleY(1) skew(0deg, 0deg);
}

/* スパイラルスケールイン */
.scale-in-spiral {
  opacity: 0;
  transform: scale(0) rotate(1080deg) skew(45deg, 45deg);
  transition: opacity 2s ease-out, transform 2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform-origin: center;
  width: fit-content;
}

.scale-in-spiral.show {
  opacity: 1;
  transform: scale(1) rotate(0deg) skew(0deg, 0deg);
}

/* 変形スケールイン */
.scale-in-morph {
  opacity: 0;
  transform: scale(0) rotate(360deg) skew(60deg, 60deg) translateX(-50px);
  transition: opacity 1.8s ease-out, transform 1.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform-origin: center;
  width: fit-content;
}

.scale-in-morph.show {
  opacity: 1;
  transform: scale(1) rotate(0deg) skew(0deg, 0deg) translateX(0);
}

/* バウンス変形スケールイン */
.scale-in-bounce {
  opacity: 0;
  transform: scale(0) rotate(540deg) skew(30deg, 30deg);
  transition: opacity 1.5s ease-out, transform 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform-origin: center;
  width: fit-content;
}

.scale-in-bounce.show {
  opacity: 1;
  transform: scale(1.2) rotate(0deg) skew(0deg, 0deg);
}

.scale-in-bounce.show.final {
  transform: scale(1) rotate(0deg) skew(0deg, 0deg);
}

実装のポイント

1. スクロール発火制御の統一

すべてのアニメーションで同じJavaScriptコードを使用できます。
※クラス名のみ要変更

// 共通のスクロール発火制御
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('show');
    }
  });
}, {
  threshold: 0.1,
  rootMargin: '0px 0px -50px 0px'
});

// すべてのアニメーション要素を監視
document.addEventListener('DOMContentLoaded', function() {
  const animationElements = document.querySelectorAll('[class*="-in-"]');
  animationElements.forEach(el => observer.observe(el));
});

2. パフォーマンス最適化

/* GPU加速を活用 */
.optimized-animation {
  will-change: transform, opacity;
  transform: translateZ(0); /* レイヤー分離 */
}

3. アクセシビリティ対応

/* アニメーション軽減設定に対応 */
@media (prefers-reduced-motion: reduce) {
  .fade-in-element,
  .slide-in-left,
  .slide-in-right,
  .slide-in-up,
  .slide-in-down,
  .zoom-in-element,
  .bounce-in-element,
  .flip-in-element,
  .scale-in-element {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

4. レスポンシブ対応

/* モバイルではアニメーションを簡素化 */
@media (max-width: 768px) {
  .fade-in-element,
  .slide-in-left,
  .slide-in-right,
  .slide-in-up,
  .slide-in-down,
  .zoom-in-element,
  .bounce-in-element,
  .flip-in-element,
  .scale-in-element {
    transition-duration: 0.5s; /* 短縮 */
  }
}

よくある質問

アニメーションの速度を調整したい場合は？

transition-durationプロパティで調整できます。

.fast-animation {
  transition-duration: 0.3s;
}

.slow-animation {
  transition-duration: 2s;
}
複数の要素を順番にアニメーションさせたい場合は？

transition-delayプロパティを使用します。

.staggered-element:nth-child(1) { transition-delay: 0s; }
.staggered-element:nth-child(2) { transition-delay: 0.2s; }
.staggered-element:nth-child(3) { transition-delay: 0.4s; }
スクロール時にアニメーションを開始したい場合は？

この記事で紹介しているIntersection Observer APIを使用します。すべてのアニメーションがスクロール対応になっています。

// 基本的なスクロール発火制御（記事内で紹介済み）
const observerOptions = {
  threshold: 0.1,
  rootMargin: '0px 0px -50px 0px'
};

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('show');
    }
  });
}, observerOptions);

// すべてのアニメーション要素を監視
document.addEventListener('DOMContentLoaded', function() {
  const animationElements = document.querySelectorAll(
    '.fade-in-element, .slide-in-left, .slide-in-right, .slide-in-up, .slide-in-down, ' +
    '.zoom-in-element, .bounce-in-element, .flip-in-element, .scale-in-element'
  );
  animationElements.forEach(el => observer.observe(el));
});

まとめ

フェードイン系アニメーションは、Webサイトの視覚的魅力を向上させる効果的な手法です。今回ご紹介した6種類のアニメーションを組み合わせることで、より魅力的なユーザー体験を提供できます。

実装のポイント
  • スクロール発火制御による効率的なアニメーション
  • パフォーマンスを考慮したGPU加速の活用
  • アクセシビリティへの配慮
  • レスポンシブデザインでの最適化
  • 適切なアニメーション時間の設定
ケケンタ

これらのアニメーションを活用して、より魅力的なWebサイトを作成してください！　実装でお困りの際は、この記事のコードを参考にしていただければと思います。

それでは、最後までご覧いただきありがとうございました！

当ブログではWeb制作やWordpressなどに関する情報を発信しています。ご興味のある方はほかの記事もご覧いただけるとうれしいです！

Web制作で副業するなら絶対使いこなしたいJavaScriptアニメーション
【コピペOK】文字が１つずつ表示！タイプライターの実装【HTML/CSS】
【コピペOK】タブ切り替えを紹介｜横並び・縦並び・タブ折返し【HTML】

もっと効率的にWeb制作を学びたい方へ

Web制作の学習は楽しいものですが、一人で進めていると「これで合っているのかな？」と不安になることもありますよね。

僕も独学でWeb制作を学んできましたが、今思うと「もっと早く知りたかった」と思うことがたくさんあります。

特に以下のような方は、一度プログラミングスクールの利用を検討してみることをおすすめします。

  • 学習の方向性に迷いがある方
  • 効率的にスキルを身につけたい方
  • 転職や副業でWeb制作を活用したい方
  • 挫折経験がある方

忍者CODEなら、業界最安値で24時間サポート付きの学習環境が整っています。

ご興味のある方は、こちらの記事で詳しくご紹介しています。

あわせて読みたい
忍者CODEでWeb制作を学ぶべき理由【業界最安値で挫折しない学習環境】 Web制作を学びたいけど、プログラミングスクールは高すぎるし、独学だと挫折しそうで不安…… このような悩みをお持ちの方に向けて、この記事では 業界最安値でWeb制作を...

関連記事

基本的なアニメーション

スクロール系

メニュー・タブ・ナビゲーション

＼どれを読むか迷ったときのおすすめ‼／

フォーム・UI要素

＼どれを読むか迷ったときのおすすめ‼／

ボタン・アイコン

＼どれを読むか迷ったときのおすすめ‼／

テキスト

＼どれを読むか迷ったときのおすすめ‼／

スライダー

特殊効果

]]> https://kekenta-it-blog.com/fade-in-animations-complete-guide/feed/ 0