HTML-CSS入門講座

濱屋太郎

WebParts-2
画面の切り替えパーツ

目次

P2.1 はじめに

P2.1.1 概要

  • 「画面の切り替えパーツ」は、モーダルウィンドウ、ローディング、画面遷移などの画面切り替えパーツを説明します。
  • 「画面の切り替えパーツ」で説明している機能は、以下の通りです。
(1) モーダルウィンドウ
補助ウィンドウを表示します。
(2) ローディング
Webページ読み込み時の状況表示を行います。
(3) 画面遷移
Webページの遷移状況を背景画像で知らせます。

P2.2 モーダルウィンドウ

P2.2.1 モーダルウィンドウ(modaal その1)

(1) 説明

  • modaalプラグインを使用したモーダルウィンドウです。ページ表示時にモーダルウィンドウを表示します。
  • modaalプラグインは、テキスト、写真、動画などを使用できる汎用性の高いプラグインです。

(2) 表示形式

  • ページ表示時にモーダルウィンドウが表示されることを確認してください。
  • クローズアイコンをクリックしてモーダルウィンドウが消えることを確認してください。
  • リロードを行ってモーダルウィンドウの表示を確認してください。

リロード  別画面で表示

(3) 使用機能

JavaScript
  • 使用します。
jQuery
個別ライブラリィ
  • モーダルウィンドウ表示(Modaal)
    公式サイト:Modaal(https://humaan.com/modaal/)
    CDN(CSS):https://cdn.jsdelivr.net/npm/modaal@0.4.4/dist/css/modaal.min.css
    CDN(JS):https://cdn.jsdelivr.net/npm/modaal@0.4.4/dist/js/modaal.min.js

(4) ソースコード

ソースコード表示
■ ファイル配置
  • screen-windowp-01
    • index.html
    • css
      • modaal.min.css
    • js
      • jquery-3.6.0.min.js
      • modaal.min.js

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページオープン時にモーダルウィンドウを表示するサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<!-- ▼▼▼ CSS(ここから) ▼▼▼ -->
<link rel="stylesheet" type="text/css" href="css/modaal.min.css">
<!-- ▲▲▲ CSS(ここまで) ▲▲▲ -->
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}

/* ▼▼▼ CSS(ここから) ▼▼▼ */
/* ページオープン時にモーダルウィンドウを表示する設定 */
#info {
	display: none;						/* モーダルウィンドウ領域を非表示に設定 */
}
.modaal-container {
	max-width: 600px;					/* モーダルウィンドウの横幅 */
}
.modaal-close:after, 
.modaal-close:before{
	background: #ccc;					/* モーダルウィンドウのボタンの色 */
}
.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background: #666;					/* モーダルウィンドウの背景色 */
}
.main-wrapper {
	padding: 40px 0;
}
.main-wrapper p {
	line-height: 3;
	text-align: center;
}
.window-wrapper {
	padding: 40px 0;
}
.window-wrapper p {
	line-height: 3;
	text-align: center;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
	<!-- ページオープン時にモーダルウィンドウを表示する定義 -->
	<div class="wrapper">
		<section class="main-wrapper">
            <p>【メイン画面】<br>モーダルウィンドウを開くと下に隠れます。</p>
		    <p><a href="#info" class="modal-open">モーダルウィンドウを開く</a></p>
		</section>
		<section id="info">
			<div class="window-wrapper">
	            <p class="message">【モーダルウィンドウ】<br>モーダルウィンドウのコンテンツです。</p>
			</div>
		</section>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT(ここから) ▼▼▼ -->
<!-- ページオープン時にモーダルウィンドウを表示する制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="js/modaal.min.js" type="text/javascript"></script>
<script>
$('.modal-open').modaal({						/* ウィンドウを表示 */
	start_open: true,							/* ページロード時に表示 */
	overlay_close: true,						/* ウィンドウの背景クリック時に閉じる */
	before_open: function() {					/* ウィンドウが開く前に行う */
		$('html').css('overflow-y','hidden');	/* 縦スクロールバーを非表示 */
	},
	after_close:function() {					/* モーダルが閉じた後に行う */
		$('html').css('overflow-y','scroll');	/* 縦スクロールバーを表示 */
	}
});
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

P2.2.2 モーダルウィンドウ(modaal その2)

(1) 説明

  • modaalプラグインを使用したモーダルウィンドウです。
  • テキスト、確認テキスト、画像、動画(Youtube)、フレーム(iframe)の各モーダルウィンドウを表示します。

(2) 表示形式

  • 表示されているモーダルウィンドウ種別をクリックして対象のモーダルウィンドウが表示されることを確認してください。

別画面で表示

(3) 使用機能

JavaScript
  • 使用します。
jQuery
個別ライブラリィ
  • モーダルウィンドウ表示(Modaal)
    公式サイト:Modaal(https://humaan.com/modaal/)
    CDN(CSS):https://cdn.jsdelivr.net/npm/modaal@0.4.4/dist/css/modaal.min.css
    CDN(JS):https://cdn.jsdelivr.net/npm/modaal@0.4.4/dist/js/modaal.min.js

(4) ソースコード

ソースコード表示
■ ファイル配置
  • screen-windowp-01
    • index.html
    • css
      • modaal.min.css
    • js
      • jquery-3.6.0.min.js
      • modaal.min.js

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>モーダルウィンドウを表示するサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<!-- ▼▼▼ CSS(ここから) ▼▼▼ -->
<link rel="stylesheet" type="text/css" href="css/modaal.min.css">
<!-- ▲▲▲ CSS(ここまで) ▲▲▲ -->
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}

/* ▼▼▼ CSS(ここから) ▼▼▼ */
/* モーダルウィンドウを表示する設定 */
.hide-area {
	display: none;						/* モーダルウィンドウ領域を非表示に設定 */
}
.modaal-container {
	max-width: 600px;					/* モーダルウィンドウの横幅 */
}
.modaal-close:after, 
.modaal-close:before{
	background: #ccc;					/* モーダルウィンドウのボタンの色 */
}
.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background: #666;					/* モーダルウィンドウの背景色 */
}
.main-wrapper {
	max-width: 760px;
	margin: 0 auto;
	padding: 40px 0;
}
.main-wrapper p {
	line-height: 3;
	text-align: center;
}
.window-wrapper {
	padding: 40px 0;
}
.window-wrapper p {
	line-height: 3;
	text-align: center;
}
.gallery-list {
	display: flex;
	list-style-type: none;
}
.gallery-list li {
	width: calc(100% / 3);
	padding: 0 5px;
}
.gallery-list li img {
	width: 100%;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
	<!-- モーダルウィンドウを表示する定義 -->
	<div class="wrapper">
		<section class="main-wrapper">
            <p>【メイン画面】<br>モーダルウィンドウを開くと下に隠れます。</p>
		    <p><a href="#info" class="info">【テキストのモーダルウィンドウを開く】</a></p>
		    <p><a href="#confirm" class="confirm">【確認を促すモーダルウィンドウを開く】</a></p>
		    <p>【画像のモーダルウィンドウを開く(写真をクリック)】</p>
		    <ul class="gallery-list">
		    	<li><a href="images/sample-1024-768-01.jpg" class="gallery" data-group="gallery"><img src="images/sample-256x128-01.jpg" alt="サンプル-01"></a></li>
		    	<li><a href="images/sample-1024x768-02.jpg" class="gallery" data-group="gallery"><img src="images/sample-256x128-02.jpg" alt="サンプル-01"></a></li>
		    	<li><a href="images/sample-1024x768-03.jpg" class="gallery" data-group="gallery"><img src="images/sample-256x128-03.jpg" alt="サンプル-01"></a></li>
		    </ul>
		    <p><a href="https://www.youtube.com/embed/k7eWaTdtnkU" class="video-open">【動画のモーダルウィンドウを開く】</a></p>
		    <p><a href="https://html-css.hamaya2020.com" class="iframe-open">【iframeのモーダルウィンドウを開く】</a></p>
		</section>
		<section id="info" class="hide-area">
			<div class="window-wrapper">
	            <p class="message">【テキストモーダルウィンドウ】<br>テキストモーダルウィンドウのコンテンツです。</p>
			</div>
		</section>
		<section id="confirm" class="hide-area"></section>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT(ここから) ▼▼▼ -->
<!-- モーダルウィンドウを表示する制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="js/modaal.min.js" type="text/javascript"></script>
<script>
$(".info").modaal( {							/* テキストを含む一般的なモーダルウィンドウ */
	overlay_close: true,						/* モーダル背景クリック時に閉じる */
	before_open: function() {					/* モーダルが開く前に行う動作 */
		$('html').css('overflow-y','hidden');	/* 縦スクロールバーを非表示 */
	},
	after_close:function() {					/* モーダルが閉じた後に行う動作 */
		$('html').css('overflow-y','scroll');	/* 縦スクロールバーを表示 */
	}
});
$(".confirm").modaal( {							/* 確認を促すモーダルウィンドウ */
	type: 'confirm',
	confirm_title: '【継続確認】',				/* 確認画面タイトル */
	confirm_button_text: '継続', 				/* 確認画面ボタンのテキスト */
	confirm_cancel_button_text: '中止',			/* 確認画面キャンセルボタンのテキスト */
	confirm_content: '準備ができました。処理を継続しますか。',	/* 確認画面の内容 */
});
$(".gallery").modaal( {							/* 画像のモーダルウィンドウ */
	type: 'image',
	overlay_close:true,							/* モーダル背景クリック時に閉じる */
	before_open: function() {					/* モーダルが開く前に行う動作 */
		$('html').css('overflow-y','hidden');	/* 縦スクロールバーを非表示 */
	},
	after_close:function() {					/* モーダルが閉じた後に行う動作 */
		$('html').css('overflow-y','scroll');	/* 縦スクロールバーを出す */
	}
});
$(".video-open").modaal( {						/* 動画のモーダル */
	type: 'video',
	overlay_close: true,						/* モーダル背景クリック時に閉じる */
	background: '#666',							/* 背景色 */
	overlay_opacity: 0.8,						/*  透過 */
	before_open: function() {					/* モーダルが開く前に行う動作 */
		$('html').css('overflow-y','hidden');	/* 縦スクロールバーを非表示 */
	},
	after_close:function() {					/* モーダルが閉じた後に行う動作 */
		$('html').css('overflow-y','scroll');	/* 縦スクロールバーを表示 */
	}
});
$(".iframe-open").modaal( {						/* iframeのモーダルウィンドウ */
	type: 'iframe',
	width: 960,									/* iframe横幅 */
	height: 500,								/* iframe高さ */
	overlay_close: true,						/* モーダル背景クリック時に閉じる */
	before_open:function() {					/*  モーダルが開く前に行う動作 */
		$('html').css('overflow-y','hidden');	/* 縦スクロールバーを非表示 */
	},
	after_close:function() {					/* モーダルが閉じた後に行う動作 */
		$('html').css('overflow-y','scroll');	/* 縦スクロールバーを表示 */
	}
});
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->
</script>

</body>
</html>

P2.3 P2.3 ローディング

P2.3.1 ローディング(ローディング画面 その1)

(1) 説明

  • jQueryを使用してページ表示時にローディング状況を表示します。
  • ローディング中には、プログレスバーを表示し、ローディングが完了するとローディング画面が消えます。

(2) 表示形式

  • リロードしてローディング画面が表示されることを確認してください。

リロード  別画面で表示

(3) 使用機能

JavaScript
  • 使用します。
jQuery
個別ライブラリィ
  • 使用しません。

(4) ソースコード

ソースコード表示
■ ファイル配置
  • screen-loading-01
    • index.html
    • js
      • jquery-3.6.0.min.js

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ローディングのサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
html {
	height:100%;
}
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}

/* ▼▼▼ CSS(ここから) ▼▼▼ */
/* ローディングの設定 */
#loader_container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 40vh 50px 0 50px;
	text-align: center;
	background-color:#cecbc4;
	background-image: linear-gradient(to bottom, #f8f8f8 0%, #999999 100%);
	z-index: 999;
}
#bar_container {
	height: 40px;
	background: #dcdbd7;
	border-radius: 20px;
	border-top: 1px solid #cfcec9;
	border-bottom: 1px solid #f7f6f4;
	box-shadow: 0 -1px 0 #bab9b4;
	margin-bottom: 24px;
	position: relative;
}
#progress_bar {
	background-color: #ffc4d0;
	background-image: linear-gradient(to bottom, #fde7e7 0%, #c93045 100%);
	height: 108%;
	position: absolute;
	top: -3px;
	left: 0px;
	border-top: 1px solid #e5ebf4;
	border-radius: 20px;
	width: 10%;
	transition: width 0.1s ease-in-out;
}
#progress_percentage {
	position: absolute;
	top: -40px;
	right: -18px;
	width: 46px;
	height: 28px;
	padding-top: 6px;
	background: #edeef2;
	background-image: linear-gradient(to bottom, #edeef2 0%, #c9c9d3 100%);
	border-top: 1px solid white;
	border-right: 1px solid #d2d2d0;
	border-left: 1px solid #d2d2d0;
	border-bottom: 1px solid #999999;
	border-radius: 7px;
	font-size: 12px;
	color: #737371;
}
#progress_percentage::before {
	content: "";
	position: absolute;
	left: 14px;
	bottom: -11px;
	border-top: 5px solid #999;
	border-right: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 5px solid transparent;
}
#progress_percentage::after {
	content: "";
	position: absolute;
	left: 14px;
	bottom: -10px;
	border-top: 5px solid #c9c9d3;
	border-right: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 5px solid transparent;
}
#text_container {
	color: #333;
	font-weight: bold; 
	font-size: 24px;
}
#text_container span {
	display: block;
	font-weight: normal;
	font-size: 16px;
	margin-top: 6px;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */

/* メイン画面(ローディング完了後の画面) */
#main_container {
	width: calc(100vw - 22px);
	height: calc(100vh - 22px);
	padding-top: 35vh;
	text-align: center;
}

</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
	<!-- ローディングの定義 -->
	<div id="loader_container">
		<div id="bar_container">
			<div id="progress_bar">
				<div id="progress_percentage">
					10%
				</div>
			</div>
		</div>
		<div id="text_container">
			ローディング中<span>お待ちください...</span>
		</div>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
	<main>
		<div id="main_container">
			<p>【メイン画面】<br>ローディング完了後に見えます。</p>
		</div>
	</main>
</div>

<!-- ▼▼▼ SCRIPT(ここから) ▼▼▼ -->
<!-- ローディングの制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script>
var bar = $('#progress_bar');
var percentage = parseInt($('#progress_percentage').html());
function stopProgress() {
	clearInterval(progress);
}
var progress = setInterval(function() {
	percentage = percentage + 5;
	if (percentage <= 100) {
		$('#progress_percentage').html(percentage + '%');
		if (percentage > 10) {
			bar.css('width',percentage+'%');
		}
	}
	else {
		stopProgress();
		$("#loader_container").fadeOut(10);
	}
},100);
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

P2.3.2 ローディング(ローディング画面 その2)

(1) 説明

  • jQueryを使用してページ表示時にローディング状況を表示します。
  • ローディング中には、プログレスバーを表示し、ローディングが完了するとローディング画面が上下に分かれます。

(2) 表示形式

  • リロードしてローディング画面が表示されることを確認してください。

リロード  別画面で表示

(3) 使用機能

JavaScript
  • 使用します。
jQuery
個別ライブラリィ
  • 使用しません。

(4) ソースコード

ソースコード表示
■ ファイル配置
  • screen-loading-02
    • index.html
    • js
      • jquery-3.6.0.min.js

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ローディングのサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
html {
	height:100%;
}
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}

/* ▼▼▼ CSS(ここから) ▼▼▼ */
/* ローディングの設定 */
#loader_wrapper {						/* Loading背景画面設定 */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	text-align: center;
	color: #fff;
}
#loader_text {							/* Loading画像中央配置 */
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	color: #fff;
	z-index: 999;
	transform: translate(-50%, -50%);
}
.loader_cover {							/* 割れる画面のアニメーション */
	width: 100%;
	height: 50%;
	background: #4a2a2a;
	transition: all .2s cubic-bezier(.04, .435, .315, .9);
	transform: scaleY(1);
}
.loader_cover_up {						/* 上の画面 */
	transform-origin: center top;
}
.loader_cover_down {					/* 下の画面 */
	position: absolute;
	bottom: 0;
	transform-origin: center bottom;
}
.coveranime {							/* クラス名がついたらY軸方向に0 */
	transform: scaleY(0);
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */

/* メイン画面(ローディング完了後の画面) */
#main_container {
	width: calc(100vw - 22px);
	height: calc(100vh - 22px);
	padding-top: 35vh;
	text-align: center;
}

</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
	<!-- ローディングの定義 -->
	<div id="loader_container">
		<div id="loader_wrapper">
			<div id="loader_text"></div>
			<div class="loader_cover loader_cover_up"></div>
			<div class="loader_cover loader_cover_down"></div>
		</div>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
	<main>
		<div id="main_container">
			<p>【メイン画面】<br>ローディング完了後に見えます。</p>
		</div>
	</main>
</div>

<!-- ▼▼▼ SCRIPT(ここから) ▼▼▼ -->
<!-- ローディングの制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="js/progressbar.min.js" type="text/javascript"></script>
<script>
var bar = new ProgressBar.Line(loader_text, {		/* 進捗表示用のid名を指定 */
	easing: 'easeInOut',							/* アニメーション効果 */
	duration: 1000,									/* 進捗時間 */
	strokeWidth: 2,									/* 進捗ゲージの太さ */
	color: '#ccc',									/* 進捗ゲージの色 */
	trailWidth: 2,									/* ゲージベースの線の太さ */
	trailColor: '#555',								/* ゲージベースの線の色 */
	text: {											/* テキストの形状 */
		style: {									/* テキストの位置 */
			position: 'absolute',
			left: '50%',
			top: '50%',
			padding: '0',
			margin: '-40px 0 0 0',					/* バーより上に配置 */
			transform: 'translate(-50%, -50%)',
			'font-size': '1rem',
			color: '#fff',
		},
		autoStyleContainer: false					/* 自動付与のスタイルを切る */
	},
	step: function(state, bar) {
		bar.setText(Math.round(bar.value() * 100) + ' %');
	}
});
bar.animate(1.0, function () {						/* バーを描画する割合(1.0 なら100%まで) */
	$("#loader_text").fadeOut(10);					/* フェイドアウトでテキストを削除 */
	$(".loader_cover_up").addClass("coveranime");	/* カバーが上に上がるクラス追加 */
	$(".loader_cover_down").addClass("coveranime");	/* カバーが下に下がるクラス追加 */
	$("#loader_wrapper").fadeOut();					/* ローディングエリアをフェードアウト */
});
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

P2.3 P2.4 画面遷移

P2.4.1 画面遷移(その1)

(1) 説明

  • 画面遷移時にページ表示前の効果画面を表示します。
  • 画面遷移が完了すると遷移画面が上から下に流れます。

(2) 表示形式

  • リロードしてページ表示前に画面遷移画面が表示されることを確認してください。

リロード  別画面で表示

(3) 使用機能

JavaScript
  • 使用します。
jQuery
個別ライブラリィ
  • 使用しません。

(4) ソースコード

ソースコード表示
■ ファイル配置
  • screen-transition-01
    • index.html
    • js
      • jquery-3.6.0.min.js

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>背景が上から下に伸びるサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}

/* ▼▼▼ CSS(ここから) ▼▼▼ */
/* 背景が上から下に伸びる設定 */
#background-container {					/* 最初に出る背景 */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #333;
	z-index: 9999;
	text-align: center;
	color: #fff;
}
#background-text {						/* 背景に表示するテキスト */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.background {							/* 流れる背景の初期状態 */
	display: none;
}
.container.appear .background {			/* 流れる背景のアニメーション */
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #333;/*伸びる背景色の設定*/
	z-index: 999;
	transform: scaleY(0);
	animation-name: pageAnime;
	animation-duration: 1.2s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}
@keyframes pageAnime {
	0% {
		transform-origin: top;
		transform: scaleY(0);
	}
	50% {
		transform-origin: top;
		transform:scaleY(1);
	}
	50.001% {
		transform-origin:bottom;
	}
	100% {
		transform-origin:bottom;
		transform:scaleY(0);
	}
}
.main-container {						/* 画面遷移後のコンテンツ */
	width: calc(100vw - 22px);
	height: calc(100vh - 22px);
	padding-top: 35vh;
	text-align: center;
	opacity: 0;
}
.container.appear .main-container {		/* 画面遷移後のコンテンツのフェードイン */
	animation-name: pageAnimeAppear;
	animation-duration: 1s;
	animation-delay: 0.8s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes pageAnimeAppear{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
	<!-- 背景が上から下に伸びる定義 -->
	<!-- 最初に出る背景 -->
	<div id="background-container">
		<div id="background-text">
			<div>読み込み中</div>
		</div>
	</div>
	<!-- 流れる背景の領域 -->
	<div class="background"></div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
	<!-- 画面遷移後の領域 -->
	<div class="main-container">
		<div id="main-wrapper">
			<p>【メイン画面】<br>画面遷移完了後に見えます。</p>
		</div>
	</div>
</div>

<!-- ▼▼▼ SCRIPT(ここから) ▼▼▼ -->
<!-- 背景が上から下に伸びる制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script>
$(window).on('load',function() {
	/* 背景に表示されているテキストを1.2秒でフェードアウト */
	$("#background-text").delay(1200).fadeOut('slow');
	/* 背景をを1.5秒でフェードアウト */
	$("#background-container").delay(1500).fadeOut('slow',function() {
		/* 背景をを1.5秒でフェードアウトした後の処理 */
		$('.container').addClass('appear');		/* 流れる背景の実施 */
	});
	$('#background').on('animationend', function() {    
		/* アニメーションが終了時の処理を記述 */
	});
	/* 画面遷移が終了時の処理を記述 */
});
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

P2.4.2 画面遷移(その2)

(1) 説明

  • 画面遷移時にページ表示前の効果画面を表示します。
  • 画面遷移が完了すると遷移画面が中央かた左右に分かれます。

(2) 表示形式

  • リロードしてページ表示前に画面遷移画面が表示されることを確認してください。

リロード  別画面で表示

(3) 使用機能

JavaScript
  • 使用します。
jQuery
個別ライブラリィ
  • 使用しません。

(4) ソースコード

ソースコード表示
■ ファイル配置
  • screen-transition-02
    • index.html
    • js
      • jquery-3.6.0.min.js

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>背景が中央から外に伸びるサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}

/* ▼▼▼ CSS(ここから) ▼▼▼ */
/* 背景が中央から外に伸びる設定 */
#background-container {					/* 最初に出る背景 */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #333;
	z-index: 9999;
	text-align: center;
	color: #fff;
}
#background-text {						/* 背景に表示するテキスト */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.container {
	background: #333;
}
.container.appear {
	background: #fff;
}
.background1,							/* 背景の初期状態 */
.background2 {
	display: none;
}
.container.appear .background1 {		/* 右に消える背景のアニメーション */
	display: block;
	position: fixed;
	top: 0;
	left:50%;
	z-index: 999;
	width: 100%;
	height: 100vh;
	background-color: #333;
	transform: scaleX(1);
	animation-name: pageAnime1;
	animation-duration: 1.2s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}
@keyframes pageAnime1 {
	0% {
		transform-origin: left;
		transform: scaleX(1);
	}
	50% {
		transform-origin: right;
		}
	100% {
		transform-origin: right;
		transform: scaleX(0);
	}
}
.container.appear .background2 {		/* 左に消える背景のアニメーション */
	display: block;
	position: fixed;
	top: 0;
	right: 50%;
	z-index: 999;
	width: 100%;
	height: 100vh;
	background-color: #333;
	transform: scaleX(1);
	animation-name: pageAnime2;
	animation-duration: 1.2s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}
@keyframes pageAnime2{
	0% {
		transform-origin:right;
		transform:scaleX(1);
	}

	50% {
		transform-origin:left;
		}
	100% {
		transform-origin:left;
		transform:scaleX(0);
	}
}
.main-container {						/* 画面遷移後のコンテンツ */
	width: calc(100vw - 22px);
	height: calc(100vh - 22px);
	padding-top: 35vh;
	text-align: center;
	opacity: 0;
}
.container.appear .main-container {		/* 画面遷移後のコンテンツのフェードイン */
	animation-name: pageAnimeAppear;
	animation-duration: 1s;
	animation-delay: 0.8s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes pageAnimeAppear{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
	<!-- 背景が中央から外に伸びる定義 -->
	<!-- 最初に出る背景 -->
	<div id="background-container">
		<div id="background-text">
			<div>読み込み中</div>
		</div>
	</div>
	<!-- 右に消える領域 -->
	<div class="background1"></div>
	<!-- 左に消える領域 -->
	<div class="background2"></div>
	<div class="main-container">
		<div id="main-wrapper">
			<p>【メイン画面】<br>画面遷移完了後に見えます。</p>
		</div>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT(ここから) ▼▼▼ -->
<!-- 背景が中央から外に伸びる制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script>
$(window).on('load',function() {
	/* 背景に表示されているテキストを1.2秒でフェードアウト */
	$("#background-text").delay(1200).fadeOut('slow');
	/* 背景をを1.5秒でフェードアウト */
	$("#background-container").delay(1500).fadeOut('slow',function() {
		/* 背景をを1.5秒でフェードアウトした後の処理 */
		$('.container').addClass('appear');		/* 流れる背景の実施 */
	});
	$('#background').on('animationend', function() {    
		/* アニメーションが終了時の処理を記述 */
	});
	/* 画面遷移が終了時の処理を記述 */
});
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->
</script>

</body>
</html>

P2.4.3 画面遷移(その3)

(1) 説明

  • 画面遷移時にページ表示前の効果画面を表示します。
  • 画面遷移が完了すると円形に中心部に向かって消えます。

(2) 表示形式

  • リロードしてページ表示前に画面遷移画面が表示されることを確認してください。

リロード  別画面で表示

(3) 使用機能

JavaScript
  • 使用します。
jQuery
個別ライブラリィ
  • 使用しません。

(4) ソースコード

ソースコード表示
■ ファイル配置
  • screen-transition-03
    • index.html
    • js
      • jquery-3.6.0.min.js

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>背景が円形に縮小するサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}

/* ▼▼▼ CSS(ここから) ▼▼▼ */
/* 背景が円形に縮小する設定 */
#background-container {					/* 最初に出る背景 */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #333;
	z-index: 9999;
	text-align: center;
	color: #fff;
}
#background-text {						/* 背景に表示するテキスト */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.container {
	background: #333;
}
.container.appear {
	background: #fff;
}
.background {							/* 円の初期状態 */
	display: none;
	position: fixed;
	top:calc(50% - 1rem);
	left:calc(50% - 1rem);
	width: 2rem;
	height: 2rem;
	background: #333;
	transform: scale(100);
	z-index: 999;
}
.container.appear .background {			/* 円が縮小するアニメーション */
	display: block;
	border-radius: 50%; 
	animation-name: pageAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}
@keyframes pageAnime{
	0% {
		transform: scale(100);
	}
	100% {
		transform: scale(0);
		display: none;
	}
}
.main-container {						/* 画面遷移後のコンテンツ */
	width: calc(100vw - 22px);
	height: calc(100vh - 22px);
	padding-top: 35vh;
	text-align: center;
	opacity: 0;
}
.container.appear .main-container {		/* 画面遷移後のコンテンツのフェードイン */
	animation-name: pageAnimeAppear;
	animation-duration: 1s;
	animation-delay: 0.8s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes pageAnimeAppear{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
	<!-- 背景が円形に縮小する定義 -->
	<!-- 最初に出る背景 -->
	<div id="background-container">
		<div id="background-text">
			<div>読み込み中</div>
		</div>
	</div>
	<!-- 円の領域 -->
	<div class="background"></div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
	<!-- 画面遷移後の領域 -->
	<div class="main-container">
		<div id="main-wrapper">
			<p>【メイン画面】<br>画面遷移完了後に見えます。</p>
		</div>
	</div>
</div>

<!-- ▼▼▼ SCRIPT(ここから) ▼▼▼ -->
<!-- 背景が円形に縮小する制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script>
$(window).on('load',function() {
	/* 背景に表示されているテキストを1.2秒でフェードアウト */
	$("#background-text").delay(1200).fadeOut('slow');
	/* 背景をを1.5秒でフェードアウト */
	$("#background-container").delay(1500).fadeOut('slow',function() {
		/* 背景をを1.5秒でフェードアウトした後の処理 */
		$('.container').addClass('appear');		/* 流れる背景の実施 */
	});
	$('#background').on('animationend', function() {    
		/* アニメーションが終了時の処理を記述 */
	});
	/* 画面遷移が終了時の処理を記述 */
});
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->
</script>

</body>
</html>

ロケット本体
PAGE
TOP
ロケット炎