CSS animation day20 となりました。
本日は、TypeWriter Effect を学びます。
1. 完成版
2. なぜか？
Glorious Demo という、リアルタイムでコーディングしているかのように見えるライブラリがあります。
最初見たとき、とても画期的なツールだと思いました。だいぶ主観が入りますが、プログラミングを学ぶ時に、本からの静的なコンテンツからの勉強は効率が悪いと感じてます。コードも出来上がるまでに紆余曲折があり、プログラマーの悩みやエラーの修正などをへて、コードが完成します。その生々しい過程を見ることは、私のような初学者にとって重要に思います。ブログの勢いが落ち、Youtubeなどの動画コンテンツに注目が集まるようになった昨今、今後のプログラムの勉強教材はUdemy をはじめとした動画へと移っていくと思ってます。(と言いつつ、Qiitaは、今後も投稿していきます)
長くなりましたが、よしこさんのポートフォリオは、アニメーション +コーディングをブラウザ上で表現でされており、大変感動しました。皆様もぜひご覧ください。
3. 参考文献
4. 分解してみる
では早速コードを書いていきます。
❶.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<h1>I learn CSS animation every day.</h1>
</body>
</html>
body {
margin: 0px;
padding: 0px;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
では次に、タイプする時に出てくる縦線を作り、背景と文字の色をかえます。
body {
margin: 0px;
padding: 0px;
background: #364548;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
letter-spacing: 3px;
border-right: 5px solid orange;
}
いい感じです。
では、アニメーションをつけていきましょう。
どうやったら良いでしょうか？
ヒントは、以前の記事です。
❷.
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
letter-spacing: 3px;
border-right: 5px solid orange;
overflow: hidden;
white-space: nowrap;
animation: type 5s steps(32, end);
}
@keyframes type {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
steps また出てきましたね。
h1のwidth を0% から100% にし、steps で段階的に画面に表示すれば完成です。
その他のポイントは、
white-space: nowrap で、文章を1文にしてます。
overflow: hiddenで要素の幅以上にはみ出た部分を、非表示にしてます。これらは、サルワカ の記事が大変わかりやすく書いてありました。
最後に、オレンジのバーにもアニメーションをつけましょう。
❸.
...
animation: type 5s steps(32), bar 1s step-end infinite;
}
@keyframes type {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
@keyframes bar {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
あれれ、文章が消えてしまいました。全体にopacity: 0つければ、消えてしまうの当たり前ですね。どうしたら良いでしょうか？
・・・
bar は border なので、border の色を変えれば良いですね！
@keyframes bar {
0% {
border-color: transparent;
}
50% {
border-color: orange;
}
100% {
border-color: transparent;
}
}
できました。
他に Javascript を使ってもっと細かい表現ができるようです。
それでは、また明日〜