ページ読み込み時にカードをフェードイン表示する方法

タイトル・説明文・サイズ・配置・背景色・枠線・影・文字などを設定して、HTMLとCSSを自動生成できます。

ページを読み込んだときに、カードが下からゆっくり浮かび上がりながら表示されるフェードインアニメーションを作る方法を紹介します。最初はカードを透明にして少し下へ配置し、ページの読み込み後に元の位置へ移動させながら、徐々に表示する仕組みです。

今回のサンプルでは、「新着のお知らせ」というタイトルと説明文を配置したカードを使用しています。カードは60px下の位置から移動を始め、約1.4秒かけて透明な状態から完全に表示されます。位置の移動と透明度の変化を同時に行うことで、自然で滑らかなフェードインを表現しています。

ページの読み込み時に自動でアニメーションが始まるほか、「フェードインを再生」ボタンをクリックすると、同じ動きを何度でも確認できます。HTMLでカードと再生ボタンを配置し、CSSで透明度や移動距離、アニメーション時間を設定します。JavaScriptでは表示用のクラスを追加し、再生ボタンを押したときにアニメーションを最初から実行できるようにしています。

デモ

ページ読み込み時のフェードイン

カードが下からゆっくり移動しながらフェードイン表示されます。

新着のお知らせ

このカードは、ページ読み込み後に透明な状態から徐々に表示されます。

「フェードインを再生」をクリックすると、カードのフェードイン表示を何度でも確認できます。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン表示対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>ページ読み込み時にカードをフェードイン表示</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- カード全体 -->
  <div class="fade-in-card-on-load_wrap">

    <!-- タイトル -->
    <div class="fade-in-card-on-load_title">
      ページ読み込み時のフェードイン
    </div>

    <!-- 説明文 -->
    <p class="fade-in-card-on-load_text">
      カードが下からゆっくり移動しながらフェードイン表示されます。
    </p>

    <!-- フェードインするカード -->
    <div
      class="fade-in-card-on-load_card"
      id="fade-in-card-on-load-card">

      <div class="fade-in-card-on-load_heading">
        新着のお知らせ
      </div>

      <p class="fade-in-card-on-load_message">
        このカードは、ページ読み込み後に透明な状態から徐々に表示されます。
      </p>

    </div>

  </div>

  <!-- JavaScriptを読み込み -->
  <script src="script.js"></script>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ページ外側の余白をなくす */
  padding:40px 20px; /* 上下40px・左右20pxの余白。値を大きくすると画面端との間隔が広がる */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
  box-sizing:border-box; /* paddingと枠線を要素サイズへ含める */
}

/* カード全体 */
.fade-in-card-on-load_wrap{
  width:100%; /* 親要素の横幅いっぱいに表示 */
  max-width:700px; /* 最大横幅。値を大きくするとカード全体が横へ広がる */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:32px; /* 内側余白。値を大きくすると内容と枠線の間隔が広がる */
  border:1px solid #e5e7eb; /* カード全体の枠線 */
  border-radius:18px; /* カード全体の角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* カード全体の背景色 */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* タイトル */
.fade-in-card-on-load_title{
  margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
  font-size:22px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* タイトルを太字にする */
  text-align:center; /* タイトルを中央揃えにする */
}

/* 説明文 */
.fade-in-card-on-load_text{
  margin:0 0 28px; /* 下側28pxの余白。値を大きくするとカードとの間隔が広がる */
  color:#4b5563; /* 説明文の文字色 */
  line-height:1.8; /* 説明文の行間。値を大きくすると読みやすく広がる */
  text-align:center; /* 説明文を中央揃えにする */
}

/* カード */
.fade-in-card-on-load_card{
  padding:28px; /* カード内側の余白。値を大きくすると余白が広がる */
  border:1px solid #e5e7eb; /* カードの枠線 */
  border-radius:16px; /* カードの角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* カードの背景色 */
  box-shadow:0 18px 45px rgba(15,23,42,.08);
  /*
    カードの影です。
    18px・45pxを大きくすると影が広がり、
    小さくすると控えめな影になります。
  */

  opacity:0;
  /*
    初期状態の透明度です。
    0は完全に透明、1は完全に表示されます。
  */

  transform:translateY(60px);
  /*
    フェードイン開始位置です。
    60pxだけ下へ移動した状態から表示します。
    値を大きくするとさらに下から現れ、
    小さくすると開始位置が上になります。
  */

  transition:
    opacity 1.4s ease,
    transform 1.4s ease;
  /*
    フェードインアニメーションの速度です。
    1.4秒かけて透明度と位置をゆっくり変化させます。
    値を大きくするとさらにゆっくり、
    小さくすると速く表示されます。
  */
}

/* 表示後 */
.fade-in-card-on-load_card.is-show{
  opacity:1; /* 完全に表示する */
  transform:translateY(0); /* 本来の位置へ移動する */
}

/* カードタイトル */
.fade-in-card-on-load_heading{
  margin:0 0 12px; /* 下側12pxの余白 */
  font-size:20px; /* タイトル文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* 太字 */
}

/* カード本文 */
.fade-in-card-on-load_message{
  margin:0; /* 外側余白をなくす */
  color:#4b5563; /* 本文の文字色 */
  line-height:1.9; /* 本文の行間。値を大きくすると読みやすくなる */
}

/* 画面幅640px以下 */
@media (max-width:640px){

  /* スマートフォン用のカード全体 */
  .fade-in-card-on-load_wrap{
    padding:24px 18px;
    /* スマートフォンでは余白を小さくして表示領域を広くする */
  }

  /* スマートフォン用のカード */
  .fade-in-card-on-load_card{
    padding:24px 20px;
    /* スマートフォンでは内側余白を小さくして見やすくする */
  }

}

/* フェードインするカード */
const fadeInCard=document.getElementById(
  "fade-in-card-on-load-card"
);

/*
  ページ読み込み後にフェードインを開始するまでの待機時間です。
  300は0.3秒を表します。
  値を大きくすると表示開始が遅くなり、
  小さくするとすぐにフェードインします。
*/
window.addEventListener("load",function(){

  setTimeout(function(){

    fadeInCard.classList.add("is-show");

  },300);

});

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。 免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。 サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

Q ダウンロードしたけど、これをネット上で動かすにはどうするの？

Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。

InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではタイトル・説明文・フェードインするカードを配置し、CSSではカードのデザインや透明度、移動距離、アニメーション時間を設定します。JavaScriptではページの読み込み完了後に表示用のクラスを追加し、フェードインを開始します。

カードは最初、透明な状態で本来の位置より60px下に配置されています。ページの読み込みが完了してから0.3秒後にアニメーションが始まり、1.4秒かけて上へ移動しながら徐々に表示されます。

sample/
├── index.html
├── style.css
└── script.js

各ファイルの役割
index.htmlは、フェードインするカードを配置するファイルです。fade-in-card-on-load_wrapの中にタイトル・説明文・カード本体を配置しています。カード内には「新着のお知らせ」という見出しと説明文があり、表示する文章は自由に変更できます。

style.cssは、カードのデザインとフェードインアニメーションを設定するファイルです。カードの横幅・背景色・枠線・角丸・影などに加えて、フェードイン開始時の透明度、移動距離、表示にかける時間、動きの緩急を調整できます。

script.jsは、ページ読み込み後にフェードインを開始するファイルです。ページの読み込み完了を検知し、指定した待機時間が経過したあとにカードへis-showクラスを追加します。

設置方法・使い方
「サンプル一式をダウンロード」をクリックしてZIPファイルを保存してください。ZIPを展開するとsampleフォルダが作成され、その中にindex.html・style.css・script.jsが入っています。

3つのファイルを同じ階層に配置した状態で、sample/index.htmlをブラウザで開いてください。index.htmlからstyle.cssとscript.jsが読み込まれ、ページの読み込み完了後にカードが自動でフェードイン表示されます。

もう一度アニメーションを確認したい場合は、ブラウザでページを再読み込みしてください。この配布用サンプルには再生ボタンを設けていないため、ページを読み込むたびにフェードインが実行されます。

フェードインする仕組み
フェードインは、CSSのopacityとtransformを組み合わせて実現しています。opacityは透明度、transform:translateY()は上下方向の位置を指定するプロパティです。

初期状態ではopacity:0;でカードを完全に透明にし、transform:translateY(60px);で本来の位置より60px下へ移動させています。

/* カード */
.fade-in-card-on-load_card{

  opacity:0;

  transform:translateY(60px);

  transition:
    opacity 1.4s ease,
    transform 1.4s ease;

}

/* 表示後 */
.fade-in-card-on-load_card.is-show{

  opacity:1;

  transform:translateY(0);

}

JavaScriptによってカードにis-showクラスが追加されると、透明度がopacity:1;に変わり、位置がtranslateY(0)へ戻ります。

この2つの変化にtransitionを設定しているため、カードが下から上へ移動する動きと、透明な状態から徐々に見えるようになる動きが同時に実行されます。

opacityとtransformは別々に設定できるため、透明度だけを変化させるフェードインや、移動距離を大きくした演出にも変更できます。

フェードインの強さを調整する方法
フェードインの見え方は、開始時の透明度を変更することで調整できます。今回のサンプルではopacity:0;を使用しているため、カードが完全に見えない状態から表示されます。

最初からカードを少し見せたい場合は、開始時のopacityを0より大きい値に変更してください。

/* 完全に透明な状態から表示 */
opacity:0;

/* 少し透明な状態から表示 */
opacity:0.3;

/* 半透明の状態から表示 */
opacity:0.5;

/* かなり見えている状態から表示 */
opacity:0.8;

opacity:0;は完全に透明、opacity:1;は完全に表示された状態です。0.3や0.5にすると、最初からカードがうっすら見えている状態でアニメーションが始まります。

透明度の変化をはっきり見せたい場合は0に近い値、控えめなフェードインにしたい場合は1に近い値を設定してください。なお、表示後のopacity:1;はそのままにしておくことで、アニメーション終了時にカードが完全に表示されます。

フェードインの速度と緩急を調整する方法
フェードインにかかる時間と動きの緩急は、CSSのtransitionで調整できます。今回のサンプルでは、透明度と移動の両方に1.4s easeを設定しています。

transition:
  opacity 1.4s ease,
  transform 1.4s ease;

1.4sはアニメーション時間です。値を小さくすると素早く表示され、大きくするとゆっくり表示されます。

例えば、素早く表示したい場合は0.5s、標準的な速さにしたい場合は1s、ゆっくり表示したい場合は2sなどに変更できます。透明度と移動の時間を同じ値にすると、両方の動きが同時に終了します。

また、easeはアニメーションの進み方を指定する値です。時間が同じでも、この指定を変更すると動きの印象が変わります。

/* 始まりと終わりに緩急を付ける */
transition:
  opacity 1.4s ease,
  transform 1.4s ease;

/* 一定の速度で変化させる */
transition:
  opacity 1.4s linear,
  transform 1.4s linear;

/* ゆっくり始まり、徐々に速くする */
transition:
  opacity 1.4s ease-in,
  transform 1.4s ease-in;

/* 速く始まり、ゆっくり終わる */
transition:
  opacity 1.4s ease-out,
  transform 1.4s ease-out;

/* ゆっくり始まり、途中で速くなり、ゆっくり終わる */
transition:
  opacity 1.4s ease-in-out,
  transform 1.4s ease-in-out;

easeは自然な緩急を付ける設定で、今回のサンプルに使用しています。linearは一定の速度で変化するため、均一なフェードインになります。

ease-inはゆっくり始まり、ease-outは終わりに向かってゆっくりになります。ease-in-outは始まりと終わりの両方をゆっくり変化させます。

カードが自然に現れる印象を強めたい場合はease-out、落ち着いた動きにしたい場合はease-in-outなど、用途に合わせて変更できます。

透明度と移動速度を別々に設定する方法
透明度と移動のアニメーション時間は、必ずしも同じにする必要はありません。例えば、カードの移動を先に終わらせ、透明度だけをゆっくり変化させることもできます。

transition:
  opacity 1.8s ease,
  transform 0.8s ease-out;

この設定では、カードの移動は0.8秒で終了しますが、透明度は1.8秒かけて変化します。そのため、カードが先に本来の位置へ到達し、その後も徐々にはっきり表示される動きになります。

反対に、opacityの時間を短くしてtransformの時間を長くすると、カードが早い段階ではっきり見えるようになり、その後もゆっくり移動する演出になります。

フェードインの移動方向を変更する方法
今回のサンプルではtranslateY(60px)を使用しているため、カードが下から上へ移動します。translateY()の数値を変更すると移動距離を調整でき、マイナスの値にすると上から下へ移動させることもできます。

/* 下から60px移動して表示 */
transform:translateY(60px);

/* 下から20px移動して表示 */
transform:translateY(20px);

/* 上から60px移動して表示 */
transform:translateY(-60px);

/* 右から60px移動して表示 */
transform:translateX(60px);

/* 左から60px移動して表示 */
transform:translateX(-60px);

/* 移動せずにフェードイン */
transform:translateY(0);

translateY()は上下方向、translateX()は左右方向の移動を指定します。正の値と負の値で移動開始位置が変わるため、カードを表示する方向に合わせて調整できます。

移動せずに透明度だけを変化させたい場合は、初期状態のtransformをtranslateY(0)にしてください。表示後のtransform:translateY(0);は変更する必要がありません。

フェードインの開始時間を変更する方法
JavaScriptでは、ページの読み込み完了を検知するloadイベントと、処理の実行を遅らせるsetTimeout()を使用しています。

/* フェードインするカード */
const fadeInCard=document.getElementById(
  "fade-in-card-on-load-card"
);

/* ページ読み込み完了後に実行 */
window.addEventListener("load",function(){

  setTimeout(function(){

    fadeInCard.classList.add("is-show");

  },300);

});

window.addEventListener("load", ...)は、ページの読み込みが完了したときに処理を実行する設定です。

setTimeout()の300は、フェードインを開始するまでの待機時間です。単位はミリ秒で、300は0.3秒を表します。

すぐに開始したい場合は0、0.5秒後に開始したい場合は500、1秒後に開始したい場合は1000に変更できます。

この待機時間は、CSSで設定したアニメーション時間とは別のものです。例えば、待機時間を300、アニメーション時間を1.4秒に設定した場合、ページの読み込み完了から0.3秒後にフェードインが始まり、その後1.4秒かけてカードが表示されます。

カスタマイズできる内容
index.htmlでは、fade-in-card-on-load_titleの文字を変更することで全体のタイトルを変更できます。fade-in-card-on-load_textはアニメーションの説明文です。

フェードインするカードの内容は、fade-in-card-on-load_headingとfade-in-card-on-load_messageを書き換えてください。お知らせ、商品紹介、サービス案内、プロフィールなど、さまざまな内容を表示できます。

style.cssでは、カードの背景色・文字色・枠線・角丸・影を変更できます。また、opacityでフェードインの強さ、translateY()で移動距離、transitionで表示時間や緩急を調整できます。

script.jsでは、setTimeout()の数値を変更することで、ページの読み込み完了からフェードインが始まるまでの時間を調整できます。

数値調整
style.css
max-width:700px;
カード全体の最大横幅です。値を大きくすると表示エリアが横に広がり、小さくするとコンパクトになります。

margin:40px auto;
カード全体の上下余白です。40pxを大きくすると上下の間隔が広がります。autoは左右中央に配置するための指定です。

padding:32px;
カード全体の内側余白です。値を大きくすると内容と外枠の間隔が広がります。

padding:28px;
フェードインするカードの内側余白です。値を大きくすると文章とカードの端の間隔が広がります。

border:1px solid #e5e7eb;
カードの枠線です。1pxを大きくすると線が太くなり、色の値を変更すると枠線の色が変わります。

border-radius:18px;
カード全体の角丸です。値を大きくすると丸みが強くなります。

border-radius:16px;
フェードインするカードの角丸です。外側の角丸とは別に調整できます。

box-shadow:0 18px 45px rgba(15,23,42,.08);
カードの影です。18pxは影の縦方向の位置、45pxはぼかしの大きさです。値を大きくすると影が下へ移動したり、広くぼけたりします。.08は影の透明度で、大きくすると影が濃くなります。

opacity:0;
フェードイン開始時の透明度です。0は完全に透明、1は完全に表示された状態です。0.3や0.5にすると、最初から少し見えている状態でアニメーションが始まります。

transform:translateY(60px);
フェードイン開始時の移動距離です。値を大きくすると、さらに下の位置からカードが現れます。

transition:opacity 1.4s ease, transform 1.4s ease;
フェードインの表示時間と緩急です。1.4sを大きくするとゆっくり表示され、小さくすると素早く表示されます。easeを変更すると動きの進み方を調整できます。

font-size:22px;
カード全体のタイトル文字サイズです。値を大きくすると文字が大きくなります。

font-size:20px;
フェードインするカード内の見出し文字サイズです。全体のタイトルとは別に調整できます。

line-height:1.8;
カード全体の説明文の行間です。値を大きくすると行と行の間隔が広がります。

line-height:1.9;
フェードインするカード内の本文の行間です。説明文とは別に調整できます。

script.js
300
ページの読み込み完了からフェードインを開始するまでの待機時間です。単位はミリ秒で、300は0.3秒です。値を大きくすると開始が遅くなり、小さくすると早く始まります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。カード全体にはwidth:100%;とmax-width:700px;を設定しているため、画面幅が狭い場合は親要素の幅に合わせて縮小します。

また、画面幅640px以下ではメディアクエリによってカード全体の内側余白を24px 18px、フェードインするカードの内側余白を24px 20pxに変更しています。スマートフォンでは余白を小さくすることで、文章を表示する領域を確保しています。

フェードインアニメーションは画面幅に関係なく実行されるため、PCでもスマートフォンでもページの読み込み後にカードが表示されます。