映画の字幕っぽいCSSアニメーションサンプル

2020-10-03CSS,CSS アニメーション サンプル集

映画の字幕っぽいCSSアニメーションサンプル

CSSのアニメーションを利用して映画の字幕表示のようにテキストを表示するCSSアニメーションサンプルの紹介です。

字幕っぽく下段中央に文章から一行ずつ順番に割とパッと、でもふわっと表示して消えるようにしています。

※右下のRerunボタンでリロード再生できます。

See the Pen CSS filter: blur() by yochans (@yochans) on CodePen.

HTMLには、コンテナとなるクラス「container」、テキストを格納しておくクラス「text」、imgタグで背景画像を作成しています。

<div class="container">
	<img src="https://1-notes.com/wp-content/uploads/2020/06/quality-50-1024x682.jpg" />
	<div class="texts">
		<p>吾輩は猫である 名前はまだ無い</p>
		<p>どこで生れたか とんと見当がつかぬ</p>
		<p>何でも薄暗いじめじめした所で ニャーニャー泣いていた事だけは記憶している</p>
		<p>吾輩はここで始めて 人間というものを見た</p>
		<p>しかもあとで聞くとそれは</p>
		<p>書生という人間中で一番 獰悪な種族であったそうだ</p>
		<p>この書生というのは時々我々を 捕て煮て食うという話である</p>
		<p>しかしその当時は何という考もなかったから</p>
		<p>別段恐しいとも思わなかった</p>
		<p>ただ彼の掌に載せられて スーと持ち上げられた時何だか</p>
		<p>フワフワした感じが あったばかりである</p>
		<p>掌の上で少し落ちついて 書生の顔を見たのが</p>
		<p>いわゆる人間というものの 見始めであろう</p>
	</div>
</div>

CSSはテキストをpositionにて指定、初期状態では透過しておいて、一定のタイミングで順番に表示されるようにしています。

コードの個別の説明は下記にて紹介しています。

.container{
	position: relative;
	width:100%;
	height: 220px;
	background: #000;
}

.container img{
	width:100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.3);
}

.texts p{
	margin: 0;
	padding: 0;
	position: absolute;
	bottom: 5px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	text-align: center;
	color: #FFF;
	font-size: 18px;
	word-break: keep-all;
	opacity: 0;
}

.texts p:nth-child(1) { animation: text-anim 5s 0s;}
.texts p:nth-child(2) { animation: text-anim 5s 5s;}
.texts p:nth-child(3) { animation: text-anim 5s 10s;}
.texts p:nth-child(4) { animation: text-anim 5s 15s;}
.texts p:nth-child(5) { animation: text-anim 5s 20s;}
.texts p:nth-child(6) { animation: text-anim 5s 25s;}
.texts p:nth-child(7) { animation: text-anim 5s 30s;}
.texts p:nth-child(8) { animation: text-anim 5s 35s;}
.texts p:nth-child(9) { animation: text-anim 5s 40s;}
.texts p:nth-child(10) { animation: text-anim 5s 45s;}
.texts p:nth-child(11) { animation: text-anim 5s 50s;}
.texts p:nth-child(12) { animation: text-anim 5s 55s;}
.texts p:nth-child(13) { animation: text-anim 5s 60s;}

@keyframes text-anim {
	0%, 100% {opacity: 0;}
	20%, 80% {opacity: 1;}
}

コンテナ部分の詳細です。

.container{
	position: relative; /* 子要素ポジションの始点にする */
	width:100%;
	height: 220px;
	background: #000; /* 画像がない場合用 */
}

背景画像のCSSです。

「object-fit: cover;」で要素サイズに最大値でフィットするようにしています。
「filter: brightness(0.3);」は元画像の下部が明るいので、白色のテキストを読みやすくするために彩度を調節。

.container img{
	width:100%;
	height: 100%;
	object-fit: cover; /* 要素サイズにフィットさせる */
	filter: brightness(0.3); /* 画像全体を暗く */
}

文章部分です。
<p>タグで書かれたテキストの行をまとめて内包します。

「overflow-wrap: break-word;」「word-break: keep-all;」にて折り返し処理を変更しています。
画面サイズによって一行で収まらない場合用ですが、テキストの折返しが望ましい場所に追加で半角スペースを入れて、折り返すようにしています。

.texts p{
	margin: 0;
	padding: 0;
	position: absolute;
	bottom: 5px; /* 親要素の下部に */
	left: 50%; /* 横の中央揃え用 */
	transform: translateX(-50%); /* 横の中央揃え用 */
	-webkit-transform: translateX(-50%); /* 横の中央揃え用 */
	text-align: center; /* テキストの中央揃え用 */
	color: #FFF;
	font-size: 16px;
	overflow-wrap: break-word; /* 折り返しの調節 */
	word-break: keep-all; /* 折り返しの調節 */
	opacity: 0; /* 通常時は透過 */
}

アニメーションの指定です。

「texts」にある<p>タグ毎に5秒遅れで5秒間の表示用「text-anim」というアニメーションを実行するようにしています。

.texts p:nth-child(1) { animation: text-anim 5s 0s;}
.texts p:nth-child(2) { animation: text-anim 5s 5s;}
.texts p:nth-child(3) { animation: text-anim 5s 10s;}
.texts p:nth-child(4) { animation: text-anim 5s 15s;}
.texts p:nth-child(5) { animation: text-anim 5s 20s;}
.texts p:nth-child(6) { animation: text-anim 5s 25s;}
.texts p:nth-child(7) { animation: text-anim 5s 30s;}
.texts p:nth-child(8) { animation: text-anim 5s 35s;}
.texts p:nth-child(9) { animation: text-anim 5s 40s;}
.texts p:nth-child(10) { animation: text-anim 5s 45s;}
.texts p:nth-child(11) { animation: text-anim 5s 50s;}
.texts p:nth-child(12) { animation: text-anim 5s 55s;}
.texts p:nth-child(13) { animation: text-anim 5s 60s;}

アニメーションのキーフレームです。

フェードインとフェードアウトですが、20%~80%の間を完全表示とすることで、完全表示までが早くて長く表示、消えるのも早めになるようにしています。

@keyframes text-anim {
	0%, 100% {opacity: 0;}
	20%, 80% {opacity: 1;}
}

テキストと同じ方法で、画像も途中で差し替えれば、CSSだけでも割と長編のストーリーっぽいものも作れそうですね。

2020-10-03CSS,CSS アニメーション サンプル集

Posted by Yousuke.U