こんにちは朱夏です。
今回は、CSSで出来るタイピングアニメーションの実装方法を詳しく調べてみました。
テキストがタイピングした時みたいに一文字ずつ表示させるエフェクトカッコイイからやってみたい！
でもどうやってつけるんだろう？
JavaScriptも勉強しないといけないのかな？
WEBサイトの学習し始めた頃、トップページがアニメーションで表示されるサイトを見て、「かっこいいなぁ、けど難しそう」って思ってました。
実は、CSSのanimationで実装できる様です。
実装方法について詳しく調べつつ、どうやって動いているかについても解明してみました。
それではいってみましょう。
実装方法その１
その１の解説
実装方法その２
その２の解説
実行結果の比較
あとがき
実装方法その１
こちらのサイトを参考に作成しています。
先ずはコードと実行結果から見ていきましょう。
HTML
<div class="container-fluid">
<div class="row topimg align-items-center">
<div class="col-12">
<h1 class="text-center text-light"><span class="typing">Typing Animation</span></h1>
</div>
</div>
</div>
CSS
.topimg {
background-color: #6C757D;
height: 50em;
}
.typing {
font-family: "Fira Mono", monospace;
display: inline-block;
position: relative;
line-height: 1;
}
.typing:after {
content: "";
position: absolute;
top:-1px;right:0;bottom:-2px;left:0;
border-left: 1px solid #fff;
background-color: #aaaaaa;
animation: typinganimation 3s steps(17) infinite alternate;
}
@keyframes typinganimation {
0% {
left: 0;
margin-right: auto;
}
100% {
left: 100%;
margin-left: .5em;
margin-right: -.5em;
}
}
これでOKです。
実行結果はこんな感じになりました。
その１の解説
それでは解説していきます。
HTML編１
今回の実装について、絶対に必要になってくるのは以下の部分だけです。
このspanに付与されたclass=”typing”に対してスタイルを適用していくことでアニメーションを実現させていきます。
CSS編１
それではCSS側のコードを見ていきます。
先ずは最初のセレクタ。
ここではフォントを指定したり、相対位置指定したりしています。
ポイントは、ここでポジションを相対位置“position: relative;”に指定しておくことです。
■コメント付きコード
.typing {
font-family: "Fira Mono", monospace; /* フォントを指定 */
display: inline-block; /* インラインブロックを指定 */
position: relative; /* 相対位置を指定 */
line-height: 1; /* 行の高さを指定 */
}
次のセレクタ。
これは疑似要素というものですね。
.typing:afterは、typingというクラスの後に要素を挿入したい場合に使用する事が出来ます。
というわけで適用されているスタイルを確認します。
.typing:after {
content: ""; /* 内容なし */
position: absolute; /* 絶対位置を指定 */
top:-1px;right:0;bottom:-2px;left:0; /* サイズ調整 */
border-left: 1px solid #fff; /* 枠線左端のみ */
background-color: #6C757D; /* 背景色 */
animation: typinganimation 3s steps(17) infinite alternate; /* アニメーション情報 */
}
ここが今回の重要な部分になるので細かく解説していきます。
content: “”;
contentにはテキストや画像などの要素を入れる事が出来ます。
今回は何も入っていません。
position: absolute;
絶対位置を指定しています。
今回のclass=”typing”の要素であるspanを絶対位置として見ることで、本来後ろに付与される予定だったtyping:afterの要素がこの要素の起点である左上まで引き延ばされることになりました。
これによりHTMLで用意したテキストの上に重なる事になり、初期位置ではすべてのテキストが隠された状態になります。
top:-1px;right:0;bottom:-2px;left:0;
この部分は、テキストが重ねた疑似要素からはみ出してしまった場合に、疑似要素のサイズ調整をしている部分です。
border-left: 1px solid #fff;
重ねた疑似要素の左端のみボーダーで線を表示します。
これは入力カーソルを疑似的に表現しています。
background-color: #6C757D;
疑似要素の背景色を指定しています。
このカラーは全体の背景色と同じ色を指定しましょう。
animation: typinganimation 3s steps(17) infinite alternate;
アニメーションを指定するための情報が書かれています。
左から順に以下の情報がスペース区切りで書かれています。
- アニメーション名(typinganimation)を指定します。
- アニメーションにかかる時間(3s)を指定します。
- アニメーションの切替段階(17段階)を指定します。
- アニメーションの繰り返し設定(無限)を指定します。
- アニメーションの繰り返し方法(偶数回は逆順)を指定します。
本来のアニメーションは滑らかに動くのですが、今回の様に段階的に動いてほしい場合はstepsを使用します。
また、alternateで繰り返しの偶数回目を逆順で変化させることで、タイピングで入力→バックスペースで削除 を繰り返す動作を表現しています。
次はアニメーションの動作部分になります。
@keyframes typinganimation {
0% {
left: 0; /* 左端の位置 */
margin-right: auto; /* 右のmargin */
}
100% {
left: 100%; /* 左端の位置 */
margin-left: .5em; /* 左のmargin */
margin-right: -.5em; /* 右のmargin */
}
}
こちらがtypinganimationというアニメーション名に適用する設定になります。
ポイントはleftを０～100%へ変化させている事。
絶対位置指定しているので、0の時はclass=”typing”の要素の左端と疑似要素の左端が一致している状態にあっており、100%ではclass=”typing”の要素の右端に来た状態になります。
実装方法その２
こちらもコードと実行結果から紹介していきます。
参考サイトはこちら。
HTML
<div class="bg-secondary"> <p class="typing1 typinganime">Typing Animation</p> </div>
CSS
@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);
.typing1{
position: relative;
top: 50%;
width: 8.8em;
margin: 0 auto;
border-right: 2px solid rgba(255,255,255,.75);
font-family: 'Anonymous Pro', monospace;
font-size: 180%;
text-align: center;
white-space: nowrap;
overflow: hidden;
}
.typinganime{
animation: typinganimation 2s steps(16) 1s 1 normal both,
inputcursor 0.5s steps(16) infinite normal;
}
@keyframes typinganimation{
from{
width: 0;
}
to{
width: 8.8em;
}
}
@keyframes inputcursor{
from{
border-right-color: rgba(255,255,255,.75);
}
to{
border-right-color: transparent;
}
}
実行結果はこんな感じです。
その２の解説
それでは解説していきます。
HTML編２
HTMLに関しては今回も重要なのは1行のみです。
1つ目との違いは、スタイル指定とアニメーションでclassを2つに分けている事です。
classを分けることで、解りやすく管理する事が出来ます。
CSS編２
それではCSSの解説をしていきます。
先ずは要素にスタイルをあてているclassから。
.typing1{
position: relative; /* 相対位置を指定 */
top: 50%; /* 要素の高さ50%に表示(縦の中央揃え) */
width: 8.8em; /* 要素の横幅 */
margin: 0 auto; /* マージン上下は0、左右はautoを指定 */
border-right: 2px solid rgba(255,255,255,.75); /* 枠線右側のみ表示 */
font-family: 'Anonymous Pro', monospace; /* フォント指定 */
font-size: 180%; /* フォントサイズ指定 */
text-align: center; /* 横の中央揃え */
white-space: nowrap; /* ホワイトスペースの表示方法指定 */
overflow: hidden; /* はみ出し部分を非表示 */
}
基本的にスタイルを指定しているだけなので、詳細についてはコメントで補完します。
ここで解説しておかなければいけないのはborder-rightの部分です。
今回はこれが入力カーソルの役割を果たしています。
あと見慣れない単語は、ホワイトスペースですかね。
ホワイトスペースとは、連続したスペースやタブ、改行の事を言います。
nowrapを指定した場合、ホワイトスペースを無視、改行は半角スペース表示、自動改行しないという設定になります。
次にアニメーション部分です。
ここでは2つのアニメーションを同時に設定しています。
.typinganime{
animation: typinganimation 2s steps(16) 1s 1 normal both, /* タイピング部分 */
inputcursor 0.5s steps(16) infinite normal; /* 入力カーソル部分 */
}
この2つです。
その１と同様に動作情報を設定します。
ここで指定しているstepsは、テキストの文字数を目安にすると綺麗に表示されます。
次に、それぞれのアニメーション設定を見てみましょう。
@keyframes typinganimation{
from{
width: 0;
}
to{
width: 8.8em;
}
}
こちらはタイピングアニメーションの方です。
fromは開始、toは終了を表しています。
widthで横幅を0から8.8emまで変化させる指定になっています。
次は入力カーソルのエフェクト部分のアニメーションです。
カーソルを点滅させています。
@keyframes inputcursor{
from{
border-right-color: rgba(255,255,255,.75); /* 枠線右端の色指定 */
}
to{
border-right-color: transparent; /* 枠線右端を透明化 */
}
}
実行結果の比較
実行した結果は両方とも同じような結果になりました。
その２の方が中央ぞろえで入力した感じで表示されるアニメーションになっているかと思います。
この2つを比較してみたところ、2つ目の方法で実装した方が汎用性が高いという結論になりました。
理由は、2つのアニメーションの仕組みにあります。
その１は、重ねて隠していたテキストを1文字ずつ表示させているのに対し、その２ではoverflow:hiddenで非表示にしていたテキストを、要素の横幅を広げることで表示させています。
解りやすいようにそれぞれのコードを少しいじってどんな動きをしているのか見てみましょう。
その１の実行結果
その１では疑似要素の背景色を変更しています。
この実験でわかるのは、背景と同色の面を重ねて隠しておき、カーテンを開ける様に左端をずらしていって、隠れているテキストを表示していくという仕組みですね。
その２の実行結果
こちらはoverflow: hidden;をコメントアウト、border-rightをborderに書き換えて実行してみました。
表示されている白い枠線が、要素の表示領域になります。
そして初期位置では、枠内に何も入っていないので全て非表示、徐々に枠の横幅が増えていき1文字ずつ表示されるといった動きになります。
この方法だと、背景に影響を与えないので、背景を画像に差し替えるなんてことが可能です。
これが、その２の汎用性が高い理由です。
その１で画像を使おうとすると、テキストを隠している部分だけが四角く色付きで表示されることになります。
あとがき
というわけで、タイピングアニメーションについて解説してみました。
こういったアニメーションは、ただフェードインさせるだけのアニメーションと違い、ちょっと複雑な組み合わせをしないと実現できないアニメーションなので難易度が高くなっています。
でも、仕組みさえわかってしまえば、あとは自分でカスタマイズして自由に使うことが出来ると思います。
少しずつできることを増やして、動きのあるサイトを作れるようになっていきましょう。
今回はここまでです。
次回もよろしくお願いします。
