フェードアウトする読み込み中アニメーションを作る方法
フェードアウトする読み込み中アニメーションを作る方法を紹介します。読み込み中アニメーションを急に消すのではなく、徐々に透明にしながらフェードアウトさせることで、画面の切り替わりが自然になり、ユーザーに違和感を与えにくい演出を実現できます。WebサイトやWebアプリでよく使われる定番のアニメーションです。
このサンプルでは、HTML・CSS・JavaScriptを使って読み込み中アニメーションを表示し、処理が完了したタイミングでフェードアウトさせる方法を紹介します。CSSのアニメーションとJavaScriptを組み合わせたシンプルな構成のため、特別なライブラリを使用せず、そのまま既存サイトへ導入できます。
ページ読み込み時や画像読み込み後、Ajax通信完了後など、読み込み中アニメーションを自然に終了させたい場面で活用できます。読み込み中表示をより見栄えよくしたい方や、画面遷移を滑らかに演出したい方にもおすすめのサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
コンテンツ表示完了
読み込み中アニメーションがフェードアウトした後に表示される画面です。
is-hide を追加し、opacity と visibility で自然にフェードアウトします。
コードをコピーして使おう！
<!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="loading-animation-fade-out_screen">
<!-- 読み込み後に見える内容 -->
<div class="loading-animation-fade-out_content">
<h1>コンテンツ表示完了</h1>
<p>読み込み中アニメーションがフェードアウトした後に表示される画面です。</p>
</div>
<!-- 読み込み中表示 -->
<div class="loading-animation-fade-out_overlay" id="loadingOverlay">
<div class="loading-animation-fade-out_loader"></div>
<p class="loading-animation-fade-out_text">読み込み中...</p>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>ファイル構成と設置方法
このサンプルは、HTML・CSS・JavaScriptの3ファイルで構成されています。HTMLに読み込み中アニメーションと表示するコンテンツを配置し、CSSで読み込み中アニメーションやフェードアウトのアニメーションを設定します。JavaScriptでは読み込み完了のタイミングでクラスを追加し、読み込み中アニメーションを自然にフェードアウトさせます。
sample/
├── index.html
├── style.css
└── script.js
3つのファイルを同じフォルダへ配置し、ブラウザで index.html を開くと動作を確認できます。サンプルでは一定時間経過後に読み込み中アニメーションがフェードアウトするようになっていますが、実際に使用する場合は画像の読み込み完了時やAjax通信完了時など、任意のタイミングで is-hide クラスを追加してください。フェードアウトの速度や読み込み中アニメーションの色・サイズはCSSから自由に変更できます。
コメント