ページ読み込み時にカードをフェードイン表示する方法
ページ読み込み時にカードをフェードイン表示する方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用して、ページを開いたタイミングでカードがゆっくりと表示されるアニメーションを実装します。表示と同時に透明な状態から徐々に不透明になり、少し下の位置から自然に浮かび上がるため、シンプルながら印象的な画面演出を実現できます。
このようなフェードインアニメーションは、お知らせカードやプロフィールカード、サービス紹介、料金プラン、ブログ一覧など、最初に見せたいコンテンツを目立たせたい場面でよく利用されます。派手すぎない動きのため、企業サイトやポートフォリオ、ランディングページなど幅広いWebサイトへ取り入れやすい演出です。
タイトルや説明文はHTMLから変更でき、CSSでは背景色や文字色、余白、角丸、影、フェード時間、移動量を自由に調整できます。JavaScriptはページ読み込み時に表示用のクラスを追加するだけのシンプルな構成なので、初心者でも導入しやすく、さまざまなカードUIへ応用できるサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
カードが下からゆっくり移動しながらフェードイン表示されます。
このカードは、ページ読み込み後に透明な状態から徐々に表示されます。
「フェードインを再生」をクリックすると、カードのフェードイン表示を何度でも確認できます。
コードをコピーして使おう！
<!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>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。ページの読み込み後にカードをフェードイン表示するサンプルで、HTMLではカードの構造を作成し、CSSではカードのデザインとフェードインアニメーションを設定します。JavaScriptではページの読み込み完了後にクラスを付与し、カードをゆっくり表示する処理を行います。シンプルな構成なので、初心者でも仕組みを理解しながら導入しやすいサンプルです。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはカード全体の構造を作成するファイルです。タイトル、説明文、カードの見出し、本文を編集できます。
style.cssはカードのデザインとフェードインアニメーションを設定するファイルです。横幅、余白、背景色、枠線、角丸、影、フェード時間、開始位置などを変更できます。
script.jsはページ読み込み後にカードへクラスを追加し、フェードインアニメーションを開始する処理を記述しています。表示開始までの待機時間も変更できます。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開くと、ページ読み込み後にカードが下からゆっくりフェードイン表示されます。
カスタマイズできる内容
index.htmlではタイトル、説明文、カード内の見出し、本文を自由に変更できます。お知らせ、キャンペーン情報、サービス紹介、プロフィールカードなど用途に合わせて内容を変更できます。
style.cssではカード全体の横幅、余白、背景色、文字色、角丸、影、フェードイン開始位置、フェードイン時間を変更できます。演出を控えめにしたり、よりゆっくり表示したりすることも可能です。
script.jsではページ読み込み後にフェードインを開始するまでの待機時間を変更できます。
数値調整
style.css
max-width:700px;
カード全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
padding:32px;
カード全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。
border-radius:18px;
カード全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
padding:28px;
カード内部の余白です。値を大きくすると内容と枠線の間隔が広がります。
box-shadow:0 18px 45px ...
カードの影です。18px・45pxを大きくすると影が広がり、小さくすると控えめになります。
transform:translateY(60px);
フェードイン開始位置です。60pxを大きくするとさらに下から表示され、小さくすると開始位置が上になります。
transition:1.4s;
フェードインアニメーションの時間です。1.4秒かけて表示します。値を大きくするとゆっくり、小さくすると速く表示されます。
script.js
setTimeout(...,300);
ページ読み込み後にフェードインを開始するまでの待機時間です。300は0.3秒を表します。値を大きくすると表示開始が遅くなり、小さくするとすぐにフェードインします。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより画面幅に合わせてカードが縮小表示されます。また、640px以下ではpadding:24px 18px;へ変更し、カード内もpadding:24px 20px;へ調整しているため、スマートフォン・タブレット・PCで利用できます。
コメント