テキストアニメーション &#8211; ケケンタの独学ITブログ

3Dテキストアニメーションとは

3Dテキストアニメーションは、立体的な効果を使用してテキストに奥行きと動きを与えるアニメーション効果です。ユーザーに視覚的なインパクトを与え、モダンで洗練された印象を提供する効果的な手法です。

効果的な使用場面

適している場面

プレミアムサイト
エンターテイメントサイト
ゲームサイト
ポートフォリオサイト
モダンなWebアプリ
イベントサイト

避けるべき場面

ビジネスサイト
情報量の多いサイト
読みやすさを重視するサイト
パフォーマンスを重視するサイト

実装方法の比較

アニメーション	難易度	視覚的インパクト	パフォーマンス	ブラウザ対応
3D浮上効果	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
3D回転効果	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐
3Dスケール効果	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
3Dティルト効果	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
3Dフリップ効果	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐	⭐⭐⭐⭐

3D浮上効果

3D空間でテキストが浮上するアニメーションです。

① デモ

See the Pen 3Dテキスト浮上 by ケケンタ (@lgshifbg-the-looper) on CodePen.

この3D浮上効果の特徴

立体的な浮上動き
奥行きのある表現
スムーズな動き

② HTML

③ CSS

/* 共通スタイル */
.text-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
  perspective: 1000px;
}

/* 固有のスタイル */
.float3d-text {
  display: flex;
  gap: 8px;
  transform-style: preserve-3d;
}

.float3d-char {
  font-size: 48px;
  font-weight: bold;
  color: white;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transform: translateZ(0);
  transition: all 0.6s ease;
  cursor: pointer;
  position: relative;
}

.float3d-char:hover {
  transform: translateZ(50px) translateY(-20px);
  text-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
  color: #ffd700;
}

/* アニメーション効果 */
@keyframes float3d {
  0%, 100% {
    transform: translateZ(0) translateY(0);
  }
  50% {
    transform: translateZ(30px) translateY(-10px);
  }
}

.float3d-char.animate {
  animation: float3d 2s ease-in-out infinite;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const chars = document.querySelectorAll('.float3d-char');

  // 3D浮上アニメーションクラス
  class Float3DAnimation {
    constructor(chars) {
      this.chars = chars;
      this.init();
    }

    init() {
      this.chars.forEach((char, index) => {
        // ホバー効果
        char.addEventListener('mouseenter', () => {
          this.floatUp(char);
        });

        char.addEventListener('mouseleave', () => {
          this.floatDown(char);
        });

        // 自動アニメーション
        setTimeout(() => {
          char.classList.add('animate');
        }, index * 200);
      });
    }

    floatUp(char) {
      char.style.transform = 'translateZ(50px) translateY(-20px)';
      char.style.color = '#ffd700';
    }

    floatDown(char) {
      char.style.transform = 'translateZ(0) translateY(0)';
      char.style.color = 'white';
    }
  }

  // アニメーション初期化
  new Float3DAnimation(chars);
});

⑤ カスタマイズ例

/* 浮上強度の調整 */
.float3d-char:hover {
  transform: translateZ(80px) translateY(-30px);
}

/* 浮上速度の調整 */
.float3d-char {
  transition: all 0.8s ease;
}

/* 浮上時の影効果 */
.float3d-char:hover {
  text-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
}

3D回転効果

3D空間でテキストが回転するアニメーションです。

① デモ

See the Pen 3Dテキスト回転 by ケケンタ (@lgshifbg-the-looper) on CodePen.

この3D回転効果の特徴

立体的な回転動き
視覚的インパクトが高い
動的な表現

② HTML

③ CSS

/* 共通スタイル */
.text-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
  perspective: 1000px;
}

/* 固有のスタイル */
.rotate3d-text {
  display: flex;
  gap: 8px;
  transform-style: preserve-3d;
}

.rotate3d-char {
  font-size: 48px;
  font-weight: bold;
  color: white;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transform: rotateY(0deg);
  transition: all 0.8s ease;
  cursor: pointer;
  transform-style: preserve-3d;
}

.rotate3d-char:hover {
  transform: rotateY(360deg);
  color: #ff6b6b;
}

/* アニメーション効果 */
@keyframes rotate3d {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

.rotate3d-char.animate {
  animation: rotate3d 3s linear infinite;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const chars = document.querySelectorAll('.rotate3d-char');

  // 3D回転アニメーションクラス
  class Rotate3DAnimation {
    constructor(chars) {
      this.chars = chars;
      this.init();
    }

    init() {
      this.chars.forEach((char, index) => {
        // ホバー効果
        char.addEventListener('mouseenter', () => {
          this.rotate3D(char);
        });

        char.addEventListener('mouseleave', () => {
          this.resetRotation(char);
        });

        // 自動アニメーション
        setTimeout(() => {
          char.classList.add('animate');
        }, index * 300);
      });
    }

    rotate3D(char) {
      char.style.transform = 'rotateY(360deg)';
      char.style.color = '#ff6b6b';
    }

    resetRotation(char) {
      char.style.transform = 'rotateY(0deg)';
      char.style.color = 'white';
    }
  }

  // アニメーション初期化
  new Rotate3DAnimation(chars);
});

⑤ カスタマイズ例

/* 回転軸の変更（X軸） */
.rotate3d-char:hover {
  transform: rotateX(360deg);
}

/* 回転速度の調整 */
.rotate3d-char {
  transition: all 1.2s ease;
}

/* 回転時の影効果 */
.rotate3d-char:hover {
  text-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

3Dスケール効果

3D空間でテキストが拡大/縮小するアニメーションです。

① デモ

See the Pen 3Dテキストスケール by ケケンタ (@lgshifbg-the-looper) on CodePen.

この3Dスケール効果の特徴

立体的な拡大/縮小
奥行きのある表現
視覚的インパクト

② HTML

③ CSS

/* 共通スタイル */
.text-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
  perspective: 1000px;
}

/* 固有のスタイル */
.scale3d-text {
  display: flex;
  gap: 8px;
  transform-style: preserve-3d;
}

.scale3d-char {
  font-size: 48px;
  font-weight: bold;
  color: white;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transform: scale(1) translateZ(0);
  transition: all 0.6s ease;
  cursor: pointer;
  transform-style: preserve-3d;
}

.scale3d-char:hover {
  transform: scale(1.5) translateZ(30px);
  color: #4ecdc4;
}

/* アニメーション効果 */
@keyframes scale3d {
  0%, 100% {
    transform: scale(1) translateZ(0);
  }
  50% {
    transform: scale(1.3) translateZ(20px);
  }
}

.scale3d-char.animate {
  animation: scale3d 2s ease-in-out infinite;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const chars = document.querySelectorAll('.scale3d-char');

  // 3Dスケールアニメーションクラス
  class Scale3DAnimation {
    constructor(chars) {
      this.chars = chars;
      this.init();
    }

    init() {
      this.chars.forEach((char, index) => {
        // ホバー効果
        char.addEventListener('mouseenter', () => {
          this.scaleUp(char);
        });

        char.addEventListener('mouseleave', () => {
          this.scaleDown(char);
        });

        // 自動アニメーション
        setTimeout(() => {
          char.classList.add('animate');
        }, index * 200);
      });
    }

    scaleUp(char) {
      char.style.transform = 'scale(1.5) translateZ(30px)';
      char.style.color = '#4ecdc4';
    }

    scaleDown(char) {
      char.style.transform = 'scale(1) translateZ(0)';
      char.style.color = 'white';
    }
  }

  // アニメーション初期化
  new Scale3DAnimation(chars);
});

⑤ カスタマイズ例

/* スケール強度の調整 */
.scale3d-char:hover {
  transform: scale(2) translateZ(50px);
}

/* スケール速度の調整 */
.scale3d-char {
  transition: all 0.8s ease;
}

/* スケール時の影効果 */
.scale3d-char:hover {
  text-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

3Dティルト効果

マウスホバー時に3Dで傾斜するアニメーションです。

① デモ

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

この3Dティルト効果の特徴

マウス位置に応じた傾斜
インタラクティブな反応
立体的な感覚

② HTML

③ CSS

/* 共通スタイル */
.text-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
  perspective: 1000px;
}

/* 固有のスタイル */
.tilt3d-text {
  display: flex;
  gap: 8px;
  transform-style: preserve-3d;
}

.tilt3d-char {
  font-size: 48px;
  font-weight: bold;
  color: white;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
  transition: all 0.3s ease;
  cursor: pointer;
  transform-style: preserve-3d;
}

.tilt3d-char:hover {
  transform: perspective(1000px) rotateX(15deg) rotateY(15deg);
  color: '#ff9ff3';
}

/* アニメーション効果 */
@keyframes tilt3d {
  0%, 100% {
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: perspective(1000px) rotateX(10deg) rotateY(10deg);
  }
}

.tilt3d-char.animate {
  animation: tilt3d 3s ease-in-out infinite;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const chars = document.querySelectorAll('.tilt3d-char');

  // 3Dティルトアニメーションクラス
  class Tilt3DAnimation {
    constructor(chars) {
      this.chars = chars;
      this.init();
    }

    init() {
      this.chars.forEach((char, index) => {
        // マウス移動効果
        char.addEventListener('mousemove', (e) => {
          this.tilt3D(char, e);
        });

        char.addEventListener('mouseleave', () => {
          this.resetTilt(char);
        });

        // 自動アニメーション
        setTimeout(() => {
          char.classList.add('animate');
        }, index * 200);
      });
    }

    tilt3D(char, e) {
      const rect = char.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;

      const centerX = rect.width / 2;
      const centerY = rect.height / 2;

      const rotateX = (y - centerY) / 5; // より大きな動きのため除数を5に変更
      const rotateY = (centerX - x) / 5; // より大きな動きのため除数を5に変更

      char.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
      char.style.color = '#ff9ff3';
    }

    resetTilt(char) {
      char.style.transform = 'perspective(1000px) rotateX(0deg) rotateY(0deg)';
      char.style.color = 'white';
    }
  }

  // アニメーション初期化
  new Tilt3DAnimation(chars);
});

⑤ カスタマイズ例

/* ティルト強度の調整 */
.tilt3d-char:hover {
  transform: perspective(1000px) rotateX(20deg) rotateY(20deg);
}

/* ティルト速度の調整 */
.tilt3d-char {
  transition: all 0.5s ease;
}

/* ティルト時の影効果 */
.tilt3d-char:hover {
  text-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

3Dフリップ効果

3D空間でテキストがフリップするアニメーションです。

① デモ

See the Pen 3Dテキストフリップ by ケケンタ (@lgshifbg-the-looper) on CodePen.

この3Dフリップ効果の特徴

立体的なフリップ動き
視覚的インパクトが高い
モダンな印象

② HTML

③ CSS

/* 共通スタイル */
.text-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
  perspective: 1000px;
}

/* 固有のスタイル */
.flip3d-text {
  display: flex;
  gap: 8px;
  transform-style: preserve-3d;
}

.flip3d-char {
  font-size: 48px;
  font-weight: bold;
  color: white;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transform: rotateY(0deg);
  transition: all 0.8s ease;
  cursor: pointer;
  transform-style: preserve-3d;
  position: relative;
}

.flip3d-char:hover {
  transform: rotateY(180deg);
  color: #feca57;
}

/* アニメーション効果 */
@keyframes flip3d {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(90deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

.flip3d-char.animate {
  animation: flip3d 2s ease-in-out infinite;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const chars = document.querySelectorAll('.flip3d-char');

  // 3Dフリップアニメーションクラス
  class Flip3DAnimation {
    constructor(chars) {
      this.chars = chars;
      this.init();
    }

    init() {
      this.chars.forEach((char, index) => {
        // ホバー効果
        char.addEventListener('mouseenter', () => {
          this.flip3D(char);
        });

        char.addEventListener('mouseleave', () => {
          this.resetFlip(char);
        });

        // 自動アニメーション
        setTimeout(() => {
          char.classList.add('animate');
        }, index * 300);
      });
    }

    flip3D(char) {
      char.style.transform = 'rotateY(180deg)';
      char.style.color = '#feca57';
    }

    resetFlip(char) {
      char.style.transform = 'rotateY(0deg)';
      char.style.color = 'white';
    }
  }

  // アニメーション初期化
  new Flip3DAnimation(chars);
});

⑤ カスタマイズ例

/* フリップ軸の変更（X軸） */
.flip3d-char:hover {
  transform: rotateX(180deg);
}

/* フリップ速度の調整 */
.flip3d-char {
  transition: all 1s ease;
}

/* フリップ時の影効果 */
.flip3d-char:hover {
  text-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

まとめ

今回ご紹介した5種類の3Dテキストアニメーションは、それぞれ異なる特徴と用途があります。

用途別おすすめ

プレミアムサイト: 3D浮上効果・3Dフリップ効果
エンターテイメントサイト: 3D回転効果・3Dティルト効果
ゲームサイト: 3Dスケール効果

実装のポイント

パフォーマンスを考慮: 3Dアニメーションは重いので軽量化
ユーザビリティを重視: 過度な動きは避ける
ブラウザ対応: 3D対応ブラウザでの動作確認
アクセシビリティ: 動きに敏感なユーザーへの配慮

ケケンタ

3Dテキストアニメーションは、Webサイトに視覚的なインパクトを与える効果的な手法です。この記事のコードを参考に、プロジェクトに最適なアニメーションを実装してください！

あわせて読みたい

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

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

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

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

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

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

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

あわせて読みたい

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

基本的なアニメーション

スクロール系

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

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

フォーム・UI要素

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

ボタン・アイコン

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

テキスト

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

【完全版】テキスト・タイポグラフィアニメーション完全ガイド｜5カテゴリ・26種類

スライダー

【Splide】サムネイル型スライダーの簡単な作成方法【JSライブラリ】

特殊効果

背景アニメーション完全ガイド｜5種類

【コピペOK】ミニマルテキストアニメーション｜5種類【Web制作】

ケケンタ — Sat, 23 Aug 2025 05:19:03 +0000

ケケンタ

ミニマルテキストアニメーションを実装したい……

ケケンタ

シンプルで洗練されたテキスト効果を作りたい……

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

Web制作において必須のUI要素
ミニマルテキストアニメーション

をご紹介します。

5種類のアニメーション効果を完全網羅した実装なので、いままさに「ミニマルテキストアニメーションを実装しないといけない！」という方は丸っとコピペしてどうぞご活用ください！

この記事で紹介するミニマルテキストアニメーション

ミニマルフェード効果（シンプルフェード）
ミニマルスライド効果（シンプルスライド）
ミニマルスケール効果（シンプル拡大/縮小）
ミニマルカラー効果（シンプル色変化）
ミニマルシャドウ効果（シンプル影効果）

ケケンタ

特にビジネスサイトやミニマルサイトには、ミニマルテキストアニメーションが非常に効果的です。この記事のコードをご活用いただきWeb制作の効率化に繋がれば何よりです。

なお、今回ご紹介するアニメーションはCSSとJavaScriptで実装できるので、基本的なコーディング知識があれば安心してご利用いただけます。

あわせて読みたい

ミニマルテキストアニメーションとは

ミニマルテキストアニメーションは、シンプルで洗練された効果を使用してテキストに控えめな動きを与えるアニメーション効果です。ユーザーに過度な刺激を与えず、上品でモダンな印象を提供する効果的な手法です。

効果的な使用場面

適している場面

ビジネスサイト
ミニマルサイト
ポートフォリオサイト
ブログサイト
コーポレートサイト
ランディングページ

避けるべき場面

エンターテイメントサイト
ゲームサイト
視覚的インパクトを重視する場面
過度な動きを求める場面

実装方法の比較

アニメーション	難易度	視覚的インパクト	パフォーマンス	ブラウザ対応
ミニマルフェード効果	⭐⭐	⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
ミニマルスライド効果	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
ミニマルスケール効果	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
ミニマルカラー効果	⭐⭐	⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
ミニマルシャドウ効果	⭐⭐	⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐

ミニマルフェード効果

シンプルで控えめなフェードアニメーションです。

① デモ

See the Pen ミニマルテキストフェード by ケケンタ (@lgshifbg-the-looper) on CodePen.

このミニマルフェード効果の特徴

シンプルなフェード動き
控えめな表現
上品な印象

② HTML

③ CSS

/* 共通スタイル */
.text-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: #f8f9fa;
  font-family: 'Arial', sans-serif;
}

/* 固有のスタイル */
.minimal-fade-text {
  display: flex;
  gap: 4px;
}

.minimal-fade-char {
  font-size: 32px;
  font-weight: 300;
  color: #333;
  opacity: 0.7;
  transition: all 0.4s ease;
  cursor: pointer;
}

.minimal-fade-char:hover {
  opacity: 1;
  color: #007bff;
}

/* アニメーション効果 */
@keyframes minimalFade {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

.minimal-fade-char.animate {
  animation: minimalFade 2s ease-in-out infinite;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const chars = document.querySelectorAll('.minimal-fade-char');

  // ミニマルフェードアニメーションクラス
  class MinimalFadeAnimation {
    constructor(chars) {
      this.chars = chars;
      this.init();
    }

    init() {
      this.chars.forEach((char, index) => {
        // ホバー効果
        char.addEventListener('mouseenter', () => {
          this.fadeIn(char);
        });

        char.addEventListener('mouseleave', () => {
          this.fadeOut(char);
        });

        // 自動アニメーション
        setTimeout(() => {
          char.classList.add('animate');
        }, index * 100);
      });
    }

    fadeIn(char) {
      char.style.opacity = '1';
      char.style.color = '#007bff';
    }

    fadeOut(char) {
      char.style.opacity = '0.7';
      char.style.color = '#333';
    }
  }

  // アニメーション初期化
  new MinimalFadeAnimation(chars);
});

⑤ カスタマイズ例

/* フェード強度の調整 */
.minimal-fade-char:hover {
  opacity: 0.9;
}

/* フェード速度の調整 */
.minimal-fade-char {
  transition: all 0.6s ease;
}

/* フェード時の色効果 */
.minimal-fade-char:hover {
  color: #28a745;
}

ミニマルスライド効果

シンプルで控えめなスライドアニメーションです。

① デモ

See the Pen ミニマルテキストスライド by ケケンタ (@lgshifbg-the-looper) on CodePen.

このミニマルスライド効果の特徴

シンプルなスライド動き
控えめな表現
スムーズな動き

② HTML

③ CSS

/* 共通スタイル */
.text-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: #f8f9fa;
  font-family: 'Arial', sans-serif;
}

/* 固有のスタイル */
.minimal-slide-text {
  display: flex;
  gap: 4px;
}

.minimal-slide-char {
  font-size: 32px;
  font-weight: 300;
  color: #333;
  transform: translateY(0);
  transition: all 0.4s ease;
  cursor: pointer;
}

.minimal-slide-char:hover {
  transform: translateY(-4px);
  color: #007bff;
}

/* アニメーション効果 */
@keyframes minimalSlide {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

.minimal-slide-char.animate {
  animation: minimalSlide 2s ease-in-out infinite;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const chars = document.querySelectorAll('.minimal-slide-char');

  // ミニマルスライドアニメーションクラス
  class MinimalSlideAnimation {
    constructor(chars) {
      this.chars = chars;
      this.init();
    }

    init() {
      this.chars.forEach((char, index) => {
        // ホバー効果
        char.addEventListener('mouseenter', () => {
          this.slideUp(char);
        });

        char.addEventListener('mouseleave', () => {
          this.slideDown(char);
        });

        // 自動アニメーション
        setTimeout(() => {
          char.classList.add('animate');
        }, index * 100);
      });
    }

    slideUp(char) {
      char.style.transform = 'translateY(-4px)';
      char.style.color = '#007bff';
    }

    slideDown(char) {
      char.style.transform = 'translateY(0)';
      char.style.color = '#333';
    }
  }

  // アニメーション初期化
  new MinimalSlideAnimation(chars);
});

⑤ カスタマイズ例

/* スライド強度の調整 */
.minimal-slide-char:hover {
  transform: translateY(-6px);
}

/* スライド速度の調整 */
.minimal-slide-char {
  transition: all 0.6s ease;
}

/* スライド時の色効果 */
.minimal-slide-char:hover {
  color: #28a745;
}

ミニマルスケール効果

シンプルで控えめなスケールアニメーションです。

① デモ

See the Pen ミニマルテキストスケール by ケケンタ (@lgshifbg-the-looper) on CodePen.

このミニマルスケール効果の特徴

シンプルな拡大/縮小
控えめな表現
視覚的インパクト

② HTML

③ CSS

/* 共通スタイル */
.text-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: #f8f9fa;
  font-family: 'Arial', sans-serif;
}

/* 固有のスタイル */
.minimal-scale-text {
  display: flex;
  gap: 4px;
}

.minimal-scale-char {
  font-size: 32px;
  font-weight: 300;
  color: #333;
  transform: scale(1);
  transition: all 0.4s ease;
  cursor: pointer;
}

.minimal-scale-char:hover {
  transform: scale(1.1);
  color: #007bff;
}

/* アニメーション効果 */
@keyframes minimalScale {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.minimal-scale-char.animate {
  animation: minimalScale 2s ease-in-out infinite;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const chars = document.querySelectorAll('.minimal-scale-char');

  // ミニマルスケールアニメーションクラス
  class MinimalScaleAnimation {
    constructor(chars) {
      this.chars = chars;
      this.init();
    }

    init() {
      this.chars.forEach((char, index) => {
        // ホバー効果
        char.addEventListener('mouseenter', () => {
          this.scaleUp(char);
        });

        char.addEventListener('mouseleave', () => {
          this.scaleDown(char);
        });

        // 自動アニメーション
        setTimeout(() => {
          char.classList.add('animate');
        }, index * 100);
      });
    }

    scaleUp(char) {
      char.style.transform = 'scale(1.1)';
      char.style.color = '#007bff';
    }

    scaleDown(char) {
      char.style.transform = 'scale(1)';
      char.style.color = '#333';
    }
  }

  // アニメーション初期化
  new MinimalScaleAnimation(chars);
});

⑤ カスタマイズ例

/* スケール強度の調整 */
.minimal-scale-char:hover {
  transform: scale(1.15);
}

/* スケール速度の調整 */
.minimal-scale-char {
  transition: all 0.6s ease;
}

/* スケール時の色効果 */
.minimal-scale-char:hover {
  color: '#28a745';
}

ミニマルカラー効果

シンプルで控えめな色変化アニメーションです。

① デモ

See the Pen ミニマルテキストカラー by ケケンタ (@lgshifbg-the-looper) on CodePen.

このミニマルカラー効果の特徴

シンプルな色変化
控えめな表現
上品な印象

② HTML

③ CSS

/* 共通スタイル */
.text-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: #f8f9fa;
  font-family: 'Arial', sans-serif;
}

/* 固有のスタイル */
.minimal-color-text {
  display: flex;
  gap: 4px;
}

.minimal-color-char {
  font-size: 32px;
  font-weight: 300;
  color: #333;
  transition: all 0.4s ease;
  cursor: pointer;
}

.minimal-color-char:hover {
  color: #007bff;
}

/* アニメーション効果 */
@keyframes minimalColor {
  0%, 100% {
    color: #333;
  }
  50% {
    color: #007bff;
  }
}

.minimal-color-char.animate {
  animation: minimalColor 3s ease-in-out infinite;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const chars = document.querySelectorAll('.minimal-color-char');

  // ミニマルカラーアニメーションクラス
  class MinimalColorAnimation {
    constructor(chars) {
      this.chars = chars;
      this.init();
    }

    init() {
      this.chars.forEach((char, index) => {
        // ホバー効果
        char.addEventListener('mouseenter', () => {
          this.changeColor(char);
        });

        char.addEventListener('mouseleave', () => {
          this.resetColor(char);
        });

        // 自動アニメーション
        setTimeout(() => {
          char.classList.add('animate');
        }, index * 200);
      });
    }

    changeColor(char) {
      char.style.color = '#007bff';
    }

    resetColor(char) {
      char.style.color = '#333';
    }
  }

  // アニメーション初期化
  new MinimalColorAnimation(chars);
});

⑤ カスタマイズ例

/* 色変化の調整 */
.minimal-color-char:hover {
  color: '#28a745';
}

/* 色変化速度の調整 */
.minimal-color-char {
  transition: all 0.6s ease;
}

/* 色変化時の影効果 */
.minimal-color-char:hover {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

ミニマルシャドウ効果

シンプルで控えめな影効果アニメーションです。

① デモ

See the Pen ミニマルテキストシャドー by ケケンタ (@lgshifbg-the-looper) on CodePen.

このミニマルシャドウ効果の特徴

シンプルな影効果
控えめな表現
上品な印象

② HTML

③ CSS

/* 共通スタイル */
.text-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: #f8f9fa;
  font-family: 'Arial', sans-serif;
}

/* 固有のスタイル */
.minimal-shadow-text {
  display: flex;
  gap: 4px;
}

.minimal-shadow-char {
  font-size: 32px;
  font-weight: 300;
  color: #333;
  text-shadow: none;
  transition: all 0.4s ease;
  cursor: pointer;
}

.minimal-shadow-char:hover {
  text-shadow: 0 2px 4px rgba(0, 0, 255, 0.1);
  color: #007bff;
}

/* アニメーション効果 */
@keyframes minimalShadow {
  0%, 100% {
    text-shadow: none;
  }
  50% {
    text-shadow: 0 1px 2px rgba(0, 0, 255, 0.5);
  }
}

.minimal-shadow-char.animate {
  animation: minimalShadow 2s ease-in-out infinite;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const chars = document.querySelectorAll('.minimal-shadow-char');

  // ミニマルシャドウアニメーションクラス
  class MinimalShadowAnimation {
    constructor(chars) {
      this.chars = chars;
      this.init();
    }

    init() {
      this.chars.forEach((char, index) => {
        // ホバー効果
        char.addEventListener('mouseenter', () => {
          this.addShadow(char);
        });

        char.addEventListener('mouseleave', () => {
          this.removeShadow(char);
        });

        // 自動アニメーション
        setTimeout(() => {
          char.classList.add('animate');
        }, index * 100);
      });
    }

    addShadow(char) {
      char.style.textShadow = '0 2px 4px rgba(0, 0, 0, 0.1)';
      char.style.color = '#007bff';
    }

    removeShadow(char) {
      char.style.textShadow = 'none';
      char.style.color = '#333';
    }
  }

  // アニメーション初期化
  new MinimalShadowAnimation(chars);
});

⑤ カスタマイズ例

/* シャドウ強度の調整 */
.minimal-shadow-char:hover {
  text-shadow: 0 3px 6px rgba(0, 0, 255, 0.15);
}

/* シャドウ速度の調整 */
.minimal-shadow-char {
  transition: all 0.6s ease;
}

/* シャドウ時の色効果 */
.minimal-shadow-char:hover {
  color: '#28a745';
}

まとめ

今回ご紹介した5種類のミニマルテキストアニメーションは、それぞれ異なる特徴と用途があります。

用途別おすすめ

ビジネスサイト: ミニマルフェード効果・ミニマルカラー効果
ミニマルサイト: ミニマルスライド効果・ミニマルシャドウ効果
ポートフォリオサイト: ミニマルスケール効果

実装のポイント

控えめさを重視: 過度な動きは避ける
ユーザビリティを重視: 読みやすさを保つ
ブラウザ対応: 軽量で安定した動作
アクセシビリティ: すべてのユーザーに配慮

ケケンタ

ミニマルテキストアニメーションは、Webサイトに上品で洗練された印象を与える効果的な手法です。この記事のコードを参考に、プロジェクトに最適なアニメーションを実装してください！

あわせて読みたい

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

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

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

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

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

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

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

あわせて読みたい

基本的なアニメーション

スクロール系

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

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

フォーム・UI要素

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

ボタン・アイコン

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

テキスト

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

【完全版】テキスト・タイポグラフィアニメーション完全ガイド｜5カテゴリ・26種類

スライダー

【Splide】サムネイル型スライダーの簡単な作成方法【JSライブラリ】

特殊効果

背景アニメーション完全ガイド｜5種類

【コピペOK】テキストフェードアニメーション｜5種類【Web制作】

ケケンタ — Fri, 22 Aug 2025 02:50:02 +0000

ケケンタ

テキストフェードアニメーションを実装したい……

ケケンタ

文字が美しくフェードイン・フェードアウトする効果を作りたい……

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

Web制作において必須のUI要素
テキストフェードアニメーション

をご紹介します。

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

この記事で紹介するテキストフェードアニメーション

フェードイン
フェードアウト
フェードアップ（下からフェードイン）
フェードダウン（上からフェードイン）
フェードスライド

ケケンタ

特にコンテンツ表示や段階的表示には、テキストフェードアニメーションが非常に効果的です。この記事のコードをご活用いただきWeb制作の効率化に繋がれば何よりです。

なお、今回ご紹介するアニメーションはCSSとJavaScriptで実装できるので、基本的なコーディング知識があれば安心してご利用いただけます。

あわせて読みたい

テキストフェードアニメーションとは

テキストフェードアニメーションは、文字が滑らかに表示・非表示されることで、ユーザビリティと視覚的満足度を向上させるアニメーション効果です。スムーズな表示とUX向上を実現する効果的な手法です。

効果的な使用場面

適している場面

コンテンツの段階的表示
ローディング画面
エラーメッセージ
成功メッセージ
ナビゲーション
モーダル表示

避けるべき場面

過度に派手なアニメーション
パフォーマンスを重視する場面
アクセシビリティを重視する場面

実装方法の比較

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

フェードイン

文字が滑らかにフェードインするアニメーションです。

① デモ

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

このフェードイン効果の特徴

基本的なフェード効果
視覚的インパクトが高い
注目を集める効果

② HTML


  
    Welcome to Our Website
    This is a beautiful fade-in animation that creates an engaging user experience.

③ CSS

/* 共通スタイル */
.fade-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  color: white;
  text-align: center;
}

.trigger-btn {
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.trigger-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

.trigger-btn:active {
  transform: translateY(0);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .fade-title {
    font-size: 2rem;
  }
  
  .fade-description {
    font-size: 1rem;
  }
}

/* 固有のスタイル */
.fade-text {
  margin-bottom: 30px;
}

.fade-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(20px);
  transition: none;
}

.fade-description {
  font-size: 1.2rem;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(20px);
  transition: none;
}

/* フェードイン状態 */
.fade-title.fade-in,
.fade-description.fade-in {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-description.fade-in {
  transition-delay: 0.3s;
}

④ JavaScript

class FadeInAnimation {
  constructor(elements, options = {}) {
    this.elements = Array.isArray(elements) ? elements : [elements];
    this.delay = options.delay || 0;
    this.duration = options.duration || 800;
    this.stagger = options.stagger || 200;
  }

  start() {
    this.elements.forEach((element, index) => {
      setTimeout(() => {
        element.classList.add('fade-in');
      }, this.delay + (index * this.stagger));
    });
  }

  reset() {
    this.elements.forEach(element => {
      element.classList.remove('fade-in');
    });
  }

  stop() {
    this.elements.forEach(element => {
      element.classList.remove('fade-in');
    });
  }
}

document.addEventListener('DOMContentLoaded', function() {
  const fadeTitle = document.querySelector('.fade-title');
  const fadeDescription = document.querySelector('.fade-description');
  const triggerBtn = document.getElementById('fade-in-btn');
  
  const fadeInAnimation = new FadeInAnimation(
    [fadeTitle, fadeDescription],
    {
      delay: 0,
      duration: 800,
      stagger: 300
    }
  );

  // 自動開始
  setTimeout(() => {
    fadeInAnimation.start();
  }, 500);

  // トリガーボタン
  triggerBtn.addEventListener('click', function() {
    // ①テキストが非表示になる
    fadeInAnimation.reset();
    
    // ②2秒後にフェードインアニメーションが発火する
    setTimeout(() => {
      fadeInAnimation.start();
    }, 1000);
  });
});

⑤ カスタマイズ例

/* 異なるイージング */
.fade-title,
.fade-description {
  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* より大きな移動距離 */
.fade-title,
.fade-description {
  transform: translateY(40px);
}

/* 異なるカラーテーマ */
.fade-container {
  background: linear-gradient(135deg, #ff6b6b, #ee5a52);
}

/* より大きなフォント */
.fade-title {
  font-size: 3rem;
}

フェードアウト

文字が滑らかにフェードアウトするアニメーションです。

① デモ

See the Pen テキストフェードアウト by ケケンタ (@lgshifbg-the-looper) on CodePen.

このフェードアウト効果の特徴

滑らかな非表示効果
視覚的インパクト
注目を集める効果

② HTML


  
    Goodbye Message
    This text will fade out smoothly when you click the button.

③ CSS

/* 共通スタイル */
.fade-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  color: white;
  text-align: center;
}

.trigger-btn {
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.trigger-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

.trigger-btn:active {
  transform: translateY(0);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .fade-title {
    font-size: 2rem;
  }
  
  .fade-description {
    font-size: 1rem;
  }
}

/* 固有のスタイル */
.fade-text {
  margin-bottom: 30px;
}

.fade-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  opacity: 1;
  transform: translateY(0);
  transition: none;
}

.fade-description {
  font-size: 1.2rem;
  line-height: 1.6;
  opacity: 1;
  transform: translateY(0);
  transition: none;
}

/* フェードアウト状態 */
.fade-title.fade-out,
.fade-description.fade-out {
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-description.fade-out {
  transition-delay: 0.2s;
}

④ JavaScript

class FadeOutAnimation {
  constructor(elements, options = {}) {
    this.elements = Array.isArray(elements) ? elements : [elements];
    this.delay = options.delay || 0;
    this.duration = options.duration || 600;
    this.stagger = options.stagger || 200;
  }

  start() {
    this.elements.forEach((element, index) => {
      setTimeout(() => {
        element.classList.add('fade-out');
      }, this.delay + (index * this.stagger));
    });
  }

  reset() {
    this.elements.forEach(element => {
      element.classList.remove('fade-out');
    });
  }

  stop() {
    this.elements.forEach(element => {
      element.classList.remove('fade-out');
    });
  }
}

document.addEventListener('DOMContentLoaded', function() {
  const fadeTitle2 = document.querySelector('#fade-out-text .fade-title');
  const fadeDescription2 = document.querySelector('#fade-out-text .fade-description');
  const triggerBtn2 = document.getElementById('fade-out-btn');
  
  const fadeOutAnimation = new FadeOutAnimation(
    [fadeTitle2, fadeDescription2],
    {
      delay: 0,
      duration: 600,
      stagger: 200
    }
  );

  // トリガーボタン
  triggerBtn2.addEventListener('click', function() {
    // ①テキストがパッと表示される
    fadeOutAnimation.reset();
    
    // ②フェードアウトが実行される
    setTimeout(() => {
      fadeOutAnimation.start();
    }, 1000);
  });
});

⑤ カスタマイズ例

/* 異なるフェードアウト方向 */
.fade-title.fade-out,
.fade-description.fade-out {
  transform: translateY(20px);
}

/* より速いフェードアウト */
.fade-title,
.fade-description {
  transition: all 0.4s ease;
}

/* スケール効果付き */
.fade-title.fade-out,
.fade-description.fade-out {
  transform: translateY(-20px) scale(0.95);
}

フェードアップ

文字が下から上にフェードインするアニメーションです。

① デモ

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

このフェードアップ効果の特徴

下から上への動的表示
視覚的インパクト大
注目を集める効果

② HTML


  
    Rising Text Animation
    This text rises from bottom to top with a beautiful fade effect.

③ CSS

/* 共通スタイル */
.fade-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  color: white;
  text-align: center;
}

.trigger-btn {
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.trigger-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

.trigger-btn:active {
  transform: translateY(0);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .fade-title {
    font-size: 2rem;
  }

  .fade-description {
    font-size: 1rem;
  }
}

/* 固有のスタイル */
.fade-text {
  margin-bottom: 30px;
}

.fade-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(80px);
  transition: none;
}

.fade-description {
  font-size: 1.2rem;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(60px);
  transition: none;
}

/* フェードアップ状態 */
.fade-title.fade-up,
.fade-description.fade-up {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-description.fade-up {
  transition-delay: 0.3s;
}

④ JavaScript

class FadeUpAnimation {
  constructor(elements, options = {}) {
    this.elements = Array.isArray(elements) ? elements : [elements];
    this.delay = options.delay || 0;
    this.duration = options.duration || 800;
    this.stagger = options.stagger || 300;
  }

  start() {
    this.elements.forEach((element, index) => {
      setTimeout(() => {
        element.classList.add('fade-up');
      }, this.delay + (index * this.stagger));
    });
  }

  reset() {
    this.elements.forEach(element => {
      element.classList.remove('fade-up');
    });
  }

  stop() {
    this.elements.forEach(element => {
      element.classList.remove('fade-up');
    });
  }
}

document.addEventListener('DOMContentLoaded', function() {
  const fadeTitle3 = document.querySelector('#fade-up-text .fade-title');
  const fadeDescription3 = document.querySelector('#fade-up-text .fade-description');
  const triggerBtn3 = document.getElementById('fade-up-btn');

  const fadeUpAnimation = new FadeUpAnimation(
    [fadeTitle3, fadeDescription3],
    {
      delay: 0,
      duration: 800,
      stagger: 300
    }
  );

  // トリガーボタン
  triggerBtn3.addEventListener('click', function() {
    // ①テキストが非表示になる
    fadeUpAnimation.reset();

    // ②2秒後にフェードアップアニメーションが発火する
    setTimeout(() => {
      fadeUpAnimation.start();
    }, 1000);
  });
});

⑤ カスタマイズ例

/* 異なるイージング */
.fade-title,
.fade-description {
  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* より大きな移動距離 */
.fade-title {
  transform: translateY(100px);
}

/* 回転効果付き */
.fade-title.fade-up,
.fade-description.fade-up {
  transform: translateY(0) rotate(0deg);
}

.fade-title,
.fade-description {
  transform: translateY(50px) rotate(5deg);
}

フェードダウン

文字が上から下にフェードインするアニメーションです。

① デモ

See the Pen テキストフェードダウン by ケケンタ (@lgshifbg-the-looper) on CodePen.

このフェードダウン効果の特徴

上から下への動的表示
視覚的インパクト大
注目を集める効果

② HTML


  
    Falling Text Animation
    This text falls from top to bottom with a smooth fade effect.

③ CSS

/* 共通スタイル */
.fade-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  color: white;
  text-align: center;
}

.trigger-btn {
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.trigger-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

.trigger-btn:active {
  transform: translateY(0);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .fade-title {
    font-size: 2rem;
  }

  .fade-description {
    font-size: 1rem;
  }
}

/* 固有のスタイル */
.fade-text {
  margin-bottom: 30px;
}

.fade-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(-80px);
  transition: none;
}

.fade-description {
  font-size: 1.2rem;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(-60px);
  transition: none;
}

/* フェードダウン状態 */
.fade-title.fade-down,
.fade-description.fade-down {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-description.fade-down {
  transition-delay: 0.3s;
}

④ JavaScript

class FadeDownAnimation {
  constructor(elements, options = {}) {
    this.elements = Array.isArray(elements) ? elements : [elements];
    this.delay = options.delay || 0;
    this.duration = options.duration || 800;
    this.stagger = options.stagger || 300;
  }

  start() {
    this.elements.forEach((element, index) => {
      setTimeout(() => {
        element.classList.add('fade-down');
      }, this.delay + (index * this.stagger));
    });
  }

  reset() {
    this.elements.forEach(element => {
      element.classList.remove('fade-down');
    });
  }

  stop() {
    this.elements.forEach(element => {
      element.classList.remove('fade-down');
    });
  }
}

document.addEventListener('DOMContentLoaded', function() {
  const fadeTitle4 = document.querySelector('#fade-down-text .fade-title');
  const fadeDescription4 = document.querySelector('#fade-down-text .fade-description');
  const triggerBtn4 = document.getElementById('fade-down-btn');

  const fadeDownAnimation = new FadeDownAnimation(
    [fadeTitle4, fadeDescription4],
    {
      delay: 0,
      duration: 800,
      stagger: 300
    }
  );

  // トリガーボタン
  triggerBtn4.addEventListener('click', function() {
    // ①テキストが非表示になる
    fadeDownAnimation.reset();

    // ②2秒後にフェードダウンアニメーションが発火する
    setTimeout(() => {
      fadeDownAnimation.start();
    }, 1000);
  });
});

⑤ カスタマイズ例

/* 異なるイージング */
.fade-title,
.fade-description {
  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* より大きな移動距離 */
.fade-title {
  transform: translateY(-100px);
}

/* スケール効果付き */
.fade-title.fade-down,
.fade-description.fade-down {
  transform: translateY(0) scale(1);
}

.fade-title,
.fade-description {
  transform: translateY(-50px) scale(0.9);
}

フェードスライド

文字がスライドしながらフェードするアニメーションです。

① デモ

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

このフェードスライド効果の特徴

スライドとフェードの組み合わせ
視覚的インパクト大
注目を集める効果

② HTML


  
    Sliding Text Animation
    This text slides in from the side with a beautiful fade effect.

③ CSS

/* 共通スタイル */
.fade-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  color: white;
  text-align: center;
}

.trigger-btn {
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.trigger-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

.trigger-btn:active {
  transform: translateY(0);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .fade-title {
    font-size: 2rem;
  }

  .fade-description {
    font-size: 1rem;
  }
}

/* 固有のスタイル */
.fade-text {
  margin-bottom: 30px;
}

.fade-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateX(-80px);
  transition: none;
}

.fade-description {
  font-size: 1.2rem;
  line-height: 1.6;
  opacity: 0;
  transform: translateX(-60px);
  transition: none;
}

/* フェードスライド状態 */
.fade-title.fade-slide,
.fade-description.fade-slide {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-description.fade-slide {
  transition-delay: 0.3s;
}

/* 異なる方向のスライド */
.fade-title.slide-right {
  transform: translateX(50px);
}

.fade-description.slide-right {
  transform: translateX(60px);
}

④ JavaScript

class FadeSlideAnimation {
  constructor(elements, options = {}) {
    this.elements = Array.isArray(elements) ? elements : [elements];
    this.delay = options.delay || 0;
    this.duration = options.duration || 800;
    this.stagger = options.stagger || 300;
    this.direction = options.direction || 'left';
  }

  start() {
    this.elements.forEach((element, index) => {
      // 方向に応じてクラスを追加
      if (this.direction === 'right') {
        element.classList.add('slide-right');
      }

      setTimeout(() => {
        element.classList.add('fade-slide');
      }, this.delay + (index * this.stagger));
    });
  }

  reset() {
    this.elements.forEach(element => {
      element.classList.remove('fade-slide', 'slide-right');
    });
  }

  stop() {
    this.elements.forEach(element => {
      element.classList.remove('fade-slide', 'slide-right');
    });
  }
}

document.addEventListener('DOMContentLoaded', function() {
  const fadeTitle5 = document.querySelector('#fade-slide-text .fade-title');
  const fadeDescription5 = document.querySelector('#fade-slide-text .fade-description');
  const triggerBtn5 = document.getElementById('fade-slide-btn');

  const fadeSlideAnimation = new FadeSlideAnimation(
    [fadeTitle5, fadeDescription5],
    {
      delay: 0,
      duration: 800,
      stagger: 300,
      direction: 'left'
    }
  );

  // トリガーボタン
  triggerBtn5.addEventListener('click', function() {
    // ①テキストが非表示になる
    fadeSlideAnimation.reset();

    // ②2秒後にフェードスライドアニメーションが発火する
    setTimeout(() => {
      fadeSlideAnimation.start();
    }, 1000);
  });
});

⑤ カスタマイズ例

/* 異なるイージング */
.fade-title,
.fade-description {
  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* より大きな移動距離 */
.fade-title {
  transform: translateX(-100px);
}

/* 回転効果付き */
.fade-title.fade-slide,
.fade-description.fade-slide {
  transform: translateX(0) rotate(0deg);
}

.fade-title,
.fade-description {
  transform: translateX(-50px) rotate(-5deg);
}

まとめ

今回ご紹介した5種類のテキストフェードアニメーションは、それぞれ異なる特徴と用途があります。

用途別おすすめ

コンテンツ表示: フェードイン・フェードアップ
ローディング画面: フェードイン・フェードダウン
エラーメッセージ: フェードアウト・フェードスライド
成功メッセージ: フェードイン・フェードアップ

実装のポイント

アクセシビリティを重視: スクリーンリーダー対応
パフォーマンスを考慮: 軽量なアニメーション
ブラウザ対応: 幅広いブラウザで動作するように
ユーザビリティ: 直感的な操作を可能に

ケケンタ

テキストフェードアニメーションは、ユーザビリティと視覚的満足度を向上させる重要な要素です。この記事のコードを参考に、プロジェクトに最適なアニメーションを実装してください！

あわせて読みたい

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

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

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

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

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

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

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

あわせて読みたい

基本的なアニメーション

スクロール系

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

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

フォーム・UI要素

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

ボタン・アイコン

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

テキスト

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

【完全版】テキスト・タイポグラフィアニメーション完全ガイド｜5カテゴリ・26種類

スライダー

【Splide】サムネイル型スライダーの簡単な作成方法【JSライブラリ】

特殊効果

背景アニメーション完全ガイド｜5種類

【コピペOK】テキストスライドアニメーション｜5種類【Web制作】

ケケンタ — Thu, 21 Aug 2025 06:22:39 +0000

ケケンタ

テキストスライドアニメーションを実装したい……

ケケンタ

文字が滑らかにスライドする効果を作りたい……

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

Web制作において必須のUI要素
テキストスライドアニメーション

をご紹介します。

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

この記事で紹介するテキストスライドアニメーション

スライドイン
スライドアウト
スライドアップ（下からスライド）
スライドダウン（上からスライド）
スライドリバース（逆方向スライド）

ケケンタ

特にナビゲーションやコンテンツ切り替えには、テキストスライドアニメーションが非常に効果的です。この記事のコードをご活用いただきWeb制作の効率化に繋がれば何よりです。

なお、今回ご紹介するアニメーションはCSSとJavaScriptで実装できるので、基本的なコーディング知識があれば安心してご利用いただけます。

あわせて読みたい

テキストスライドアニメーションとは

テキストスライドアニメーションは、文字が滑らかにスライドすることで、動的な表現と視覚的インパクトを提供するアニメーション効果です。ナビゲーションやコンテンツ切り替えに適した効果的な手法です。

効果的な使用場面

適している場面

ナビゲーションメニュー
コンテンツ切り替え
カルーセル表示
モーダル表示
タブ切り替え
ページ遷移

避けるべき場面

過度に派手なアニメーション
パフォーマンスを重視する場面
アクセシビリティを重視する場面

実装方法の比較

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

スライドイン

文字が横方向からスライドインするアニメーションです。

① デモ

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

このスライドイン効果の特徴

基本的なスライド効果
視覚的インパクトが高い
注目を集める効果

② HTML


  
    Welcome to Our Website
    This is a beautiful slide-in animation that creates an engaging user experience.

③ CSS

/* 共通スタイル */
.slide-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  color: white;
  text-align: center;
  overflow: hidden;
}

.slide-text {
  margin-bottom: 30px;
  width: 100%;
}

.trigger-btn {
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.trigger-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

.trigger-btn:active {
  transform: translateY(0);
}

/* 固有のスタイル */
.slide-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateX(-100px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-description {
  font-size: 1.2rem;
  line-height: 1.6;
  opacity: 0;
  transform: translateX(-100px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0.3s;
}

/* スライドイン状態 */
.slide-title.slide-in,
.slide-description.slide-in {
  opacity: 1;
  transform: translateX(0);
}

/* リセット状態（ボタンクリック時用） */
.slide-title.reset-state,
.slide-description.reset-state {
  transition: none;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .slide-title {
    font-size: 2rem;
  }

  .slide-description {
    font-size: 1rem;
  }
}

④ JavaScript

class SlideInAnimation {
  constructor(elements, options = {}) {
    this.elements = Array.isArray(elements) ? elements : [elements];
    this.delay = options.delay || 0;
    this.duration = options.duration || 800;
    this.stagger = options.stagger || 200;
    this.direction = options.direction || 'left';
  }

  start() {
    this.elements.forEach((element, index) => {
      setTimeout(() => {
        element.classList.add('slide-in');
      }, this.delay + (index * this.stagger));
    });
  }

  reset() {
    this.elements.forEach(element => {
      // 一時的にtransitionを無効化
      element.classList.add('reset-state');
      element.classList.remove('slide-in');

      // 強制的にリフローを発生させてリセット状態を適用
      element.offsetHeight;

      // transitionを再度有効化
      element.classList.remove('reset-state');
    });
  }

  stop() {
    this.elements.forEach(element => {
      element.classList.remove('slide-in');
    });
  }
}

document.addEventListener('DOMContentLoaded', function() {
  const slideTitle = document.querySelector('#slide-in-text .slide-title');
  const slideDescription = document.querySelector('#slide-in-text .slide-description');
  const triggerBtn = document.getElementById('slide-in-btn');

  const slideInAnimation = new SlideInAnimation(
    [slideTitle, slideDescription],
    {
      delay: 0,
      duration: 800,
      stagger: 300,
      direction: 'left'
    }
  );

  // 自動開始
  setTimeout(() => {
    slideInAnimation.start();
  }, 500);

  // トリガーボタン
  triggerBtn.addEventListener('click', function() {
    // アニメーションをリセット
    slideInAnimation.reset();

    // 少し待ってからアニメーションを開始
    setTimeout(() => {
      slideInAnimation.start();
    }, 50);
  });
});

⑤ カスタマイズ例

/* 異なるイージング */
.slide-title,
.slide-description {
  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* より大きな移動距離 */
.slide-title,
.slide-description {
  transform: translateX(-150px);
}

/* 異なるカラーテーマ */
.slide-container {
  background: linear-gradient(135deg, #ff6b6b, #ee5a52);
}

/* より大きなフォント */
.slide-title {
  font-size: 3rem;
}

スライドアウト

文字が横方向にスライドアウトするアニメーションです。

① デモ

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

このスライドアウト効果の特徴

滑らかな非表示効果
視覚的インパクト
注目を集める効果

② HTML


  
    Goodbye Message
    This text will slide out smoothly when you click the button.

③ CSS

/* 共通スタイル */
.slide-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  color: white;
  text-align: center;
  overflow: hidden;
}

.slide-text {
  margin-bottom: 30px;
  width: 100%;
}

.trigger-btn {
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.trigger-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

.trigger-btn:active {
  transform: translateY(0);
}

/* 固有のスタイル */
.slide-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  opacity: 1;
  transform: translateX(0);
  transition: none; /* 初期表示時はアニメーションなし */
}

.slide-description {
  font-size: 1.2rem;
  line-height: 1.6;
  opacity: 1;
  transform: translateX(0);
  transition: none; /* 初期表示時はアニメーションなし */
}

/* スライドアウト状態 */
.slide-title.slide-out,
.slide-description.slide-out {
  opacity: 0;
  transform: translateX(100px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); /* スライドアウト時のみアニメーション */
}

.slide-description.slide-out {
  transition-delay: 0.3s; /* 説明文の遅延 */
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .slide-title {
    font-size: 2rem;
  }

  .slide-description {
    font-size: 1rem;
  }
}

④ JavaScript

class SlideOutAnimation {
  constructor(elements, options = {}) {
    this.elements = Array.isArray(elements) ? elements : [elements];
    this.delay = options.delay || 0;
    this.duration = options.duration || 800;
    this.stagger = options.stagger || 300;
    this.direction = options.direction || 'right';
  }

  start() {
    this.elements.forEach((element, index) => {
      setTimeout(() => {
        element.classList.add('slide-out');
      }, this.delay + (index * this.stagger));
    });
  }

  reset() {
    this.elements.forEach(element => {
      element.classList.remove('slide-out');
    });
  }

  stop() {
    this.elements.forEach(element => {
      element.classList.remove('slide-out');
    });
  }
}

document.addEventListener('DOMContentLoaded', function() {
  const slideTitle2 = document.querySelector('#slide-out-text .slide-title');
  const slideDescription2 = document.querySelector('#slide-out-text .slide-description');
  const triggerBtn2 = document.getElementById('slide-out-btn');

  const slideOutAnimation = new SlideOutAnimation(
    [slideTitle2, slideDescription2],
    {
      delay: 0,
      duration: 600,
      stagger: 200,
      direction: 'right'
    }
  );

  // 自動開始
  setTimeout(() => {
    slideOutAnimation.start();
  }, 500);

  // トリガーボタン
  triggerBtn2.addEventListener('click', function() {
    // まずテキストを表示状態にする
    slideOutAnimation.reset();

    // テキストが表示されてから0.5秒待ってからスライドアウト開始
    setTimeout(() => {
      slideOutAnimation.start();
    }, 500);
  });
});

⑤ カスタマイズ例

/* 異なるスライドアウト方向 */
.slide-title.slide-out,
.slide-description.slide-out {
  transform: translateX(-100px);
}

/* より速いスライドアウト */
.slide-title,
.slide-description {
  transition: all 0.4s ease;
}

/* スケール効果付き */
.slide-title.slide-out,
.slide-description.slide-out {
  transform: translateX(100px) scale(0.95);
}

スライドアップ

文字が下から上にスライドするアニメーションです。

① デモ

See the Pen テキストスライドアップ by ケケンタ (@lgshifbg-the-looper) on CodePen.

このスライドアップ効果の特徴

下から上への動的表示
視覚的インパクト大
注目を集める効果

② HTML


  
    Rising Text Animation
    This text slides up from bottom to top with a beautiful effect.

③ CSS

/* 共通スタイル */
.slide-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  color: white;
  text-align: center;
  overflow: hidden;
}

.slide-text {
  margin-bottom: 30px;
  width: 100%;
}

.trigger-btn {
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.trigger-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

.trigger-btn:active {
  transform: translateY(0);
}

/* 固有のスタイル */
.slide-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(80px);
  transition: none; /* 初期表示時はアニメーションなし */
}

.slide-description {
  font-size: 1.2rem;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(60px);
  transition: none; /* 初期表示時はアニメーションなし */
}

/* スライドアップ状態 */
.slide-title.slide-up,
.slide-description.slide-up {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); /* スライドアップ時のみアニメーション */
}

.slide-description.slide-up {
  transition-delay: 0.3s; /* 説明文の遅延 */
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .slide-title {
    font-size: 2rem;
  }

  .slide-description {
    font-size: 1rem;
  }
}

④ JavaScript

class SlideUpAnimation {
  constructor(elements, options = {}) {
    this.elements = Array.isArray(elements) ? elements : [elements];
    this.delay = options.delay || 0;
    this.duration = options.duration || 800;
    this.stagger = options.stagger || 300;
  }

  start() {
    this.elements.forEach((element, index) => {
      setTimeout(() => {
        element.classList.add('slide-up');
      }, this.delay + (index * this.stagger));
    });
  }

  reset() {
    this.elements.forEach(element => {
      element.classList.remove('slide-up');
    });
  }

  stop() {
    this.elements.forEach(element => {
      element.classList.remove('slide-up');
    });
  }
}

document.addEventListener('DOMContentLoaded', function() {
  const slideTitle3 = document.querySelector('#slide-up-text .slide-title');
  const slideDescription3 = document.querySelector('#slide-up-text .slide-description');
  const triggerBtn3 = document.getElementById('slide-up-btn');

  const slideUpAnimation = new SlideUpAnimation(
    [slideTitle3, slideDescription3],
    {
      delay: 0,
      duration: 800,
      stagger: 300
    }
  );

  // 自動開始
  setTimeout(() => {
    slideUpAnimation.start();
  }, 500);

  // トリガーボタン
  triggerBtn3.addEventListener('click', function() {
    // まずテキストを表示状態にする
    slideUpAnimation.reset();

    // テキストが表示されてから0.5秒待ってからスライドアップ開始
    setTimeout(() => {
      slideUpAnimation.start();
    }, 500);
  });
});

⑤ カスタマイズ例

/* 異なるイージング */
.slide-title,
.slide-description {
  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* より大きな移動距離 */
.slide-title {
  transform: translateY(100px);
}

/* 回転効果付き */
.slide-title.slide-up,
.slide-description.slide-up {
  transform: translateY(0) rotate(0deg);
}

.slide-title,
.slide-description {
  transform: translateY(50px) rotate(5deg);
}

スライドダウン

文字が上から下にスライドするアニメーションです。

① デモ

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

このスライドダウン効果の特徴

上から下への動的表示
視覚的インパクト大
注目を集める効果

② HTML


  
    Falling Text Animation
    This text slides down from top to bottom with a smooth effect.

③ CSS

/* 共通スタイル */
.slide-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  color: white;
  text-align: center;
  overflow: hidden;
}

.slide-text {
  margin-bottom: 30px;
  width: 100%;
}

.trigger-btn {
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.trigger-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

.trigger-btn:active {
  transform: translateY(0);
}

/* 固有のスタイル */
.slide-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(-80px);
  transition: none; /* 初期表示時はアニメーションなし */
}

.slide-description {
  font-size: 1.2rem;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(-60px);
  transition: none; /* 初期表示時はアニメーションなし */
}

/* スライドダウン状態 */
.slide-title.slide-down,
.slide-description.slide-down {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); /* スライドダウン時のみアニメーション */
}

.slide-description.slide-down {
  transition-delay: 0.3s; /* 説明文の遅延 */
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .slide-title {
    font-size: 2rem;
  }

  .slide-description {
    font-size: 1rem;
  }
}

④ JavaScript

class SlideDownAnimation {
  constructor(elements, options = {}) {
    this.elements = Array.isArray(elements) ? elements : [elements];
    this.delay = options.delay || 0;
    this.duration = options.duration || 800;
    this.stagger = options.stagger || 300;
  }

  start() {
    this.elements.forEach((element, index) => {
      setTimeout(() => {
        element.classList.add('slide-down');
      }, this.delay + (index * this.stagger));
    });
  }

  reset() {
    this.elements.forEach(element => {
      element.classList.remove('slide-down');
    });
  }

  stop() {
    this.elements.forEach(element => {
      element.classList.remove('slide-down');
    });
  }
}

document.addEventListener('DOMContentLoaded', function() {
  const slideTitle4 = document.querySelector('#slide-down-text .slide-title');
  const slideDescription4 = document.querySelector('#slide-down-text .slide-description');
  const triggerBtn4 = document.getElementById('slide-down-btn');

  const slideDownAnimation = new SlideDownAnimation(
    [slideTitle4, slideDescription4],
    {
      delay: 0,
      duration: 800,
      stagger: 300
    }
  );

  // 自動開始
  setTimeout(() => {
    slideDownAnimation.start();
  }, 500);

  // トリガーボタン
  triggerBtn4.addEventListener('click', function() {
    // まずテキストを表示状態にする
    slideDownAnimation.reset();

    // テキストが表示されてから0.5秒待ってからスライドダウン開始
    setTimeout(() => {
      slideDownAnimation.start();
    }, 500);
  });
});

⑤ カスタマイズ例

/* 異なるイージング */
.slide-title,
.slide-description {
  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* より大きな移動距離 */
.slide-title {
  transform: translateY(-100px);
}

/* スケール効果付き */
.slide-title.slide-down,
.slide-description.slide-down {
  transform: translateY(0) scale(1);
}

.slide-title,
.slide-description {
  transform: translateY(-50px) scale(0.9);
}

スライドリバース

文字が逆方向にスライドするアニメーションです。

① デモ

See the Pen テキストスライドリバース by ケケンタ (@lgshifbg-the-looper) on CodePen.

このスライドリバース効果の特徴

逆方向の動的表示
視覚的インパクト大
注目を集める効果

② HTML


  
    Reverse Slide Animation
    This text slides in reverse direction with a unique effect.

③ CSS

/* 共通スタイル */
.slide-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  color: white;
  text-align: center;
  overflow: hidden;
}

.slide-text {
  margin-bottom: 30px;
  width: 100%;
}

.trigger-btn {
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.trigger-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

.trigger-btn:active {
  transform: translateY(0);
}

/* 固有のスタイル */
.slide-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateX(120px);
  transition: none; /* 初期表示時はアニメーションなし */
}

.slide-description {
  font-size: 1.2rem;
  line-height: 1.6;
  opacity: 0;
  transform: translateX(100px);
  transition: none; /* 初期表示時はアニメーションなし */
}

/* スライドリバース状態 */
.slide-title.slide-reverse,
.slide-description.slide-reverse {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); /* スライドリバース時のみアニメーション */
}

.slide-description.slide-reverse {
  transition-delay: 0.3s; /* 説明文の遅延 */
}

/* 異なる方向のリバース */
.slide-title.reverse-up {
  transform: translateY(50px);
}

.slide-description.reverse-up {
  transform: translateY(40px);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .slide-title {
    font-size: 2rem;
  }

  .slide-description {
    font-size: 1rem;
  }
}

④ JavaScript

class SlideReverseAnimation {
  constructor(elements, options = {}) {
    this.elements = Array.isArray(elements) ? elements : [elements];
    this.delay = options.delay || 0;
    this.duration = options.duration || 800;
    this.stagger = options.stagger || 300;
    this.direction = options.direction || 'right';
  }

  start() {
    this.elements.forEach((element, index) => {
      // 方向に応じてクラスを追加
      if (this.direction === 'up') {
        element.classList.add('reverse-up');
      }

      setTimeout(() => {
        element.classList.add('slide-reverse');
      }, this.delay + (index * this.stagger));
    });
  }

  reset() {
    this.elements.forEach(element => {
      element.classList.remove('slide-reverse', 'reverse-up');
    });
  }

  stop() {
    this.elements.forEach(element => {
      element.classList.remove('slide-reverse', 'reverse-up');
    });
  }
}

document.addEventListener('DOMContentLoaded', function() {
  const slideTitle5 = document.querySelector('#slide-reverse-text .slide-title');
  const slideDescription5 = document.querySelector('#slide-reverse-text .slide-description');
  const triggerBtn5 = document.getElementById('slide-reverse-btn');

  const slideReverseAnimation = new SlideReverseAnimation(
    [slideTitle5, slideDescription5],
    {
      delay: 0,
      duration: 800,
      stagger: 300,
      direction: 'right'
    }
  );

  // 自動開始
  setTimeout(() => {
    slideReverseAnimation.start();
  }, 500);

  // トリガーボタン
  triggerBtn5.addEventListener('click', function() {
    // まずテキストを表示状態にする
    slideReverseAnimation.reset();

    // テキストが表示されてから0.5秒待ってからスライドリバース開始
    setTimeout(() => {
      slideReverseAnimation.start();
    }, 500);
  });
});

⑤ カスタマイズ例

/* 異なるイージング */
.slide-title,
.slide-description {
  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* より大きな移動距離 */
.slide-title {
  transform: translateX(150px);
}

/* 回転効果付き */
.slide-title.slide-reverse,
.slide-description.slide-reverse {
  transform: translateX(0) rotate(0deg);
}

.slide-title,
.slide-description {
  transform: translateX(100px) rotate(-5deg);
}

まとめ

今回ご紹介した5種類のテキストスライドアニメーションは、それぞれ異なる特徴と用途があります。

用途別おすすめ

ナビゲーション: スライドイン・スライドアウト
コンテンツ切り替え: スライドアップ・スライドダウン
カルーセル表示: スライドイン・スライドリバース
モーダル表示: スライドアップ・スライドダウン

実装のポイント

アクセシビリティを重視: スクリーンリーダー対応
パフォーマンスを考慮: 軽量なアニメーション
ブラウザ対応: 幅広いブラウザで動作するように
ユーザビリティ: 直感的な操作を可能に

ケケンタ

テキストスライドアニメーションは、動的な表現と視覚的インパクトを提供する重要な要素です。この記事のコードを参考に、プロジェクトに最適なアニメーションを実装してください！

あわせて読みたい