#element { white-space:nowrap; overflow:hidden; }
こんにちは、「ふ」です。
今回はタイトルロゴのように、テキストを左から右へと徐々に表示させるアニメーションを紹介します。
仕組みはとてもシンプルです。
blockまたはinline-block要素のwidthを、0%から徐々に広げていくだけ。このやり方、あまりwebサイトで取り上げられていなかったので、記事として発信することにしました。
記事の後半では複数行のテキストを時間差で「徐々に表示」するサンプルも載せています。
「CSS1分間クッキング(笑)」のつもりで試してみてください。
widthを変化させることでテキストを「徐々表示」させるには、テキスト要素の規定値に手を加える必要があります。
<p class = "jojo"> テキストを徐々に表示。 </p>
テキストを徐々に表示。
テキストのサンプルを用意しました。widthの変化がわかりやすいよう、borderを付けています。
ただし、このままwidthを変化させてもうまくいきません。
.jojo { width:10%; }
試しにwidthを縮めてみます。
テキストを徐々に表示。
すると⬆︎のように、要素の幅に合わせて自動的に折り返されてしまいます。
white-spaceで改行禁止にしましょう。
.jojo { width:10%; 「「1white-space:nowrap;」」 }
テキストを徐々に表示。
文字列が折り返されず、1行で表示されるようになりました。
あとははみ出した部分を非表示にします。
.jojo { width:10%; white-space:nowrap; 「「1overflow:hidden;」」 }
テキストを徐々に表示。
overflow:hiddenを指定すると、<p>の領域内のみテキストが表示されるようになりました。
これで準備はOKです。
それではアニメーションさせてみましょう。
ここでの注意点ですが、アニメーション開始/終了時のwidthを両方明記しておかないと、連続変化してくれません。
.jojo { white-space:nowrap; overflow:hidden; animation:jojo 4s linear infinite; } @keyframes jojo { 「「4from」」 { 「「4width:0%;」」 } }
このコードでは、「開始時のwidth:0%」しか明記されていません。そうすると....
テキストを徐々に表示。
⬆︎のように、アニメーションが段階変化してしまいます。
.jojoの規定値の部分、もしくはキーフレームに「終了時のwidth」を明記するようにしましょう。
@keyframes jojo { from { width:0%; } 「「1to」」 { 「「1width:100%;」」 } }
テキストを徐々に表示。
変化前/変化後のwidthを両方明記してやることで、連続変化が得られました。
「1行だけの徐々に表示」はこれで完成です。
<p>
CSS、
テキストを徐々に
表示させる。
</p>
CSS、
テキストを徐々に
表示させる。
3行に渡るテキスト、これを1行ごとに「徐々表示」させたい。
3行同時にwidthを広げていくのではなく、1行が表示完了のあとに2行目が徐々表示スタート..というふうにしたいですよね。
<p>
<span id = 「「1"s1"」」> CSS、</span>
<span id = 「「1"s2"」」> テキストを徐々に</span>
<span id = 「「1"s3"」」> 表示させる。</span>
</p>
はじめに、1行ごとに<span>要素で括ります。
それぞれに対し、1行バージョンで施したようにoverflowなどの下処理を施しましょう。
#s1,#s2,#s3 { 「「1display:inline-block;」」 overflow:hidden; white-space:nowrap; width:0%; }
また各行を<span>要素にしたため、そのままではwidthの変化に対応してくれません。
そのためdisplayプロパティでinline-block要素に変更しておきます。その他の指定は先ほどと同じです。
キーフレームです。
全ての行が表示されるまでの時間を6秒とし、1行あたりの表示時間を2秒(約33%)としました。
前の行が表示しきったら、次の行のwidthが広がり始める、といった具合です。
ここからは地道な作業。
各行ごとにキーフレームの違うアニメーションを仕込みます。
#s1 { animation:s1 6s infinite; } @keyframes s1 { bbfrom { width:0em; } bb33% { width: 4em; } bbto { width:4em; } } #s2 { animation:s2 6s infinite; } @keyframes s2 { bb0% { width:0em; } bb33% { width:0em; } bb66% { width:8em; } bbto { width:8em; } } #s3 { animation:s3 6s infinite; } @keyframes s3 { bb0% { width:0em; } bb66% { width:0em; } bbto { width:6em; } }
幅は「文字数*em」で指定すると、おおよその幅になるので便利です。
CSS、
テキストを徐々に
表示させる。
完成です⬆︎。
レスポンシブ指定においてfont-sizeを変更している場合は。テキスト全体がちゃんと表示されるか、スマホ/PCでの挙動を確認しましょう。
不具合がある場合は、広がったときのwidthの値を調整する必要があります。
任意のテキスト内容を自動で調整、というわけにはいかない。完全な手作業。 jsでテキストを配列化し、1文字ずつ追加←改行の際に少し間をとるなどの工夫もしたい。
最後までお読みくださり、ありがとうございます。
今回はCSSだけを使って「テキストを徐々に表示する」というものを作ってみました。
1行だけのテキストであれば、実装はすごく簡単にできます。が、複数行に渡るテキストを「徐々表示」させるとなると、地道な手作業に💧
また任意のテキストを自動で「徐々表示」させるとなると、CSSだけでは事足りません。複雑かつ自動化したい場合は、やはりJavaScriptを取り入れたほうが良さそうです。
いづれJsバージョンが完成したら、作り方を紹介しようと思っていますので、お楽しみに。
ではまた〜 ♪
SVGでWeb Animations API。
2020.11.12
〽️ ネイティブJavaScriptでのアニメーション。
swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。