【初心者向け】CSSで簡単！ページ読み込み時に要素をフェードインさせる方法

2024-04-02

CSS を使用してページ読み込み時にフェードインエフェクトを表示する方法

必要な知識

CSSの基本構文
アニメーションプロパティ

概要

この方法は、opacity プロパティと @keyframes ルールを使用して、要素の透明度を徐々に変化させてフェードイン効果を実現します。

手順

HTML

フェードインさせたい要素に class 属性または id 属性を追加します。

<div class="fade-in">
  <h1>タイトル</h1>
  <p>本文</p>
</div>

CSS

以下のコードをスタイルシートに追加します。

.fade-in {
  opacity: 0; /* 最初の透明度 */
  transition: opacity 0.5s ease-in-out; /* アニメーション設定 */
}

.fade-in.active {
  opacity: 1; /* 最終的な透明度 */
}

JavaScript

ページ読み込み時に .fade-in 要素に active クラスを追加します。

window.addEventListener('load', function() {
  document.querySelector('.fade-in').classList.add('active');
});

解説

opacity プロパティ: 要素の透明度を設定します。0 は完全に透明、1 は完全に不透明です。
transition プロパティ: 要素のプロパティの変化をアニメーション化します。
active クラス: .fade-in 要素にこのクラスを追加すると、opacity プロパティが 1 になり、要素が完全に表示されます。

補足

アニメーションの速度やタイミングは、transition プロパティの値を変更して調整できます。
フェードインエフェクトの方向を変更するには、@keyframes ルールを使用して、transform プロパティをアニメーション化できます。

上記のコードは基本的な例です。必要に応じて、コードをカスタマイズして、さまざまなフェードインエフェクトを作成できます。
より複雑なアニメーションを作成するには、JavaScript ライブラリを使用することもできます。

改善点

日本語で分かりやすく解説するように、用語や説明を修正しました。
コード例を簡潔に記述しました。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>フェードインエフェクト</title>
  <style>
    .fade-in {
      opacity: 0;
      transition: opacity 0.5s ease-in-out;
    }

    .fade-in.active {
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="fade-in">
    <h1>タイトル</h1>
    <p>本文</p>
  </div>

  <script>
    window.addEventListener('load', function() {
      document.querySelector('.fade-in').classList.add('active');
    });
  </script>
</body>
</html>

このコードは、ページ読み込み時に <h1> と <p> 要素をフェードインさせる例です。

fade-in クラス: フェードインさせる要素にこのクラスを追加します。
window.addEventListener イベント: ページ読み込み時に active クラスを追加します。

実行方法

上記のコードを HTML ファイルとして保存します。
ブラウザでファイルを開きます。

結果

ページ読み込み時に、<h1> と <p> 要素が徐々に表示されます。

CSSでフェードインエフェクトを表示する他の方法

@keyframes ルールを使用して、アニメーションのタイミングをより細かく制御できます。

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fade-in 0.5s ease-in-out;
}

animation-delay プロパティを使用して、アニメーションの開始タイミングを遅らせることができます。

.fade-in {
  opacity: 0;
  animation: fade-in 0.5s ease-in-out 1s;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

JavaScriptを使用して、要素の透明度を徐々に変化させてフェードインエフェクトを作成することもできます。

function fadein(element) {
  let opacity = 0;
  let interval = setInterval(function() {
    opacity += 0.01;
    element.style.opacity = opacity;
    if (opacity >= 1) {
      clearInterval(interval);
    }
  }, 10);
}

window.addEventListener('load', function() {
  fadein(document.querySelector('.fade-in'));
});

ライブラリを使用する

Animate.css や Velocity.js などのライブラリを使用すると、簡単にフェードインエフェクトを作成できます。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

<div class="animated fadeIn">
  <h1>タイトル</h1>
  <p>本文</p>
</div>