Cascading Style Sheets（CSS）は、誕生以来、長い道のりを歩んできました。言語の継続的な進化と強化のおかげで、CSSだけで可能になったことがたくさんあります。
CSSの最も注目すべき進歩の1つは、CSS関数の出現と改良です。これにより、Webコンテンツのスタイル設定の機能とパワーが大幅に拡張されました。
タイプライター効果とは
タイプライター効果とは、コンテンツが徐々に明らかになるプロセスをシミュレートするテキストアニメーション技術で、視聴者の目の前で展開されるタイピングの動作を模倣します。この効果は、昔のタイプライター、初期のコンピューター端末、またはコマンドラインインターフェイス（CLI）を連想させます。
テキストが徐々に表示されることで、サスペンスと興味をそそる要素が加わり、視聴者が展開されるメッセージに注意を払うようになります。
CSSのsteps()関数の仕組み
CSSの関数は、静的なスタイルだけでは達成が困難だった柔軟性のレベルを導入します。steps()関数は、CSSアニメーションで使用される一般的な関数です。アニメーションを、スムーズに移行するのではなく、個別のステップで進行しているように見せます。
steps()は、2つのパラメータを受け取るアニメーションタイミング関数です。最初のパラメータは、アニメーションの実行に必要なステップ数を示します。2番目のパラメータは、各ステップの動作を定義します。steps()関数の構文は次のようになります。
animation-timing-function: steps(n, direction)
上記のコードブロックでは、steps()関数には2つのパラメータ、nとdirectionがあります。directionパラメータは、startまたはendのいずれかです。
directionをstartに設定すると、最初のステップはアニメーションが開始されるとすぐに完了します。一方、directionをendに設定すると、最後のステップはアニメーションが終了するときに実行されます。steps()関数の重要性を示すために、次のHTMLコードを見てみましょう。
<div> <div></div> </div>
上記のコードブロックは、子divを持つcontainerdivを定義します。子divを画面上で滑らかに移動させたい場合は、次のようにCSSアニメーションを使用します。
.container {
background-color: blue;
}
div:not(.container) {
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4s infinite;
}
@keyframes movebox {
100% {
transform: translateX(100vw);
}
}
上記のコードブロックは、@keyframesルールを使用してmoveboxという名前のアニメーションを定義します。このアニメーションは子divに適用され、子divが無限ループで画面上をスムーズに移動します。
via GIPHY
スムーズなアニメーションが気に入らず、「ぎこちない」効果を実現したい場合は、steps()関数を次のように使用できます。
div:not(.container){
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4s infinite;
animation-timing-function: steps(10, end);
}
以下のGIFでわかるように、steps()関数をパラメータ値10で組み込むと、子divはスムーズなアニメーションではなく、ステップでアニメーション化されます。ステップ数が多いほど、アニメーションはぎこちなく見えなくなります。
via GIPHY
上記の例では、directionパラメータが指定されています。ただし、directionを省略すると、ブラウザはdirectionのデフォルト値としてendを使用します。
タイプライター効果を作成する
steps()関数の仕組みがわかったところで、学んだことを実践してみましょう。新しいフォルダーを作成し、適切な名前を付けます。そのフォルダーに、マークアップ用のindex.htmファイルとスタイル設定用のstyle.cssファイルを追加します。
index.htmファイルに、次のボイラープレートコードを追加します。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div> <div> Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, tempore! </div> </div> </body> </html>
上記のコードブロックは、シンプルなHTML Webサイトのマークアップを定義しています。ダミーテキストを含む別のdivを保持するcontainerdivがあります。
テキストをアニメーション化する
styles.cssファイルを開き、containerdivの幅をコンテンツの幅に設定します。
.container{
width: fit-content;
}
次に、@keyframesルールを使用して、アニメーションが時間の経過とともにどのように進行するかを制御するアニメーションを定義します。0%で幅を「0%」に設定します。100%で、幅を「100%」に設定します。
@keyframes type-text {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
次に、クラス名textの要素を選択し、overflowプロパティをhiddenに設定します。これにより、タイピング効果が開始されるまでテキストが非表示のままになります。その上で、whitespaceプロパティをnowrapに設定してテキストが1行に収まるようにします。textクラスに等幅フォントを指定し、テキストの右側に緑色の垂直ボーダーを追加します。
このボーダーはカーソルの外観になります。適切なfont-sizeとanimationプロパティをtype-textに設定します。最後に、animation-timing-functionにsteps()関数を追加します。
.text {
overflow: hidden;
white-space: nowrap;
font-family: "Courier New", Courier, monospace;
border-right: solid 10px green;
font-size: 23px;
animation: type-text forwards 4s;
animation-timing-function: steps(40);
}
ブラウザでコードを実行すると、次のように表示されます。
via GIPHY
タイピング効果を長くしたい場合は、アニメーションの継続時間とsteps()関数で指定したステップ数を調整できます。
カーソルを生き生きとさせる
タイピング効果はほぼ完成していますが、欠けている機能が1つあります。それは点滅するカーソルです。最後のコードブロックでは、テキストに右端のボーダーを設定してカーソルとしていました。このカーソルには、@keyframesルールを使用してアニメーションを追加することもできます。
@keyframes cursor-blink {
0% {
border-color: transparent;
}
100% {
border-color: green;
}
}
カスタムアニメーションを定義したら、animationプロパティtextクラスにアニメーション名を追加し、継続時間を0.6秒に設定します。
.text{
/* Other style rules*/
animation: type-text forwards 4s,
cursor-blink .6s infinite;
}
これでコードを実行すると、点滅するカーソルが表示されます。
via GIPHY
CSS関数の力
CSS関数は、Webサイトの構築方法に革命をもたらし、開発者であるあなたに注目すべきツールキットを提供しました。これらの多目的な関数は、かつては複雑なスクリプティング言語に限定されていた、動的なスタイル設定とインタラクションを可能にします。
カラー操作から、レスポンシブレイアウト、アニメーション、創造的な変換まで、CSS関数はWebデザインの可能性を拡大しました。柔軟な計算のためのcalc()、見事な背景のためのlinear-gradient()、魅力的なアニメーションのためのtranslate()などの関数を使用すると、視覚的に魅力的で魅力的なユーザーエクスペリエンスを作成できます。
コメントする