映画の字幕っぽい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だけでも割と長編のストーリーっぽいものも作れそうですね。