CSSとGIFアニメで表現するインパクトのあるテキスト
今回はCSSとGIFアニメだけでテキストをかっこ良く表現する方法をご紹介します。
具体的に説明すると、まずGIFアニメ画像を背景に敷いて、任意のテキストでマスクをかけるという感じです。サイトやページのファーストビューにこれをポンと配置するだけでインパクトを出すことが出来ます。
サンプル
まずはサンプルで確認してみてください。背景に敷くGIFアニメ次第では、ソリッドな感じにもかわいい感じにも出来そうです。
See the Pen
JqEBRv by keitasakurai (@mdesignyokohama)
on CodePen.
実装方法
CSS
HTMLはテキストを打てばよいだけで、CSSは下記のようになります。
p.sample01 {
font-size: 9vw;
font-weight: 700;
font-family: 'Rubik', sans-serif;
flex: 1;
position: relative;
text-align: center;
margin: 0;
-webkit-text-fill-color: transparent;
background-image: url("GIFアニメのパス");
-webkit-background-clip: text;
background-repeat: repeat;
background-position: center center;
}background-clipプロパティをつかっているのがポイントかと。このプロパティの値を「text」とすることで、背景に敷いた画像を前景のテキストの中に表示することができます。
注意点
文字数が多い時は、上記CSSにbackground-size:coverを追記するか、リピートしても不自然にならないようにシームレスなGIF画像を用意する必要があります。もしくはGIF画像のサイズ自体を大きくしてしまうか。
background-size:coverでの対応はGIF画像を引き伸ばしてしまうことになるので、画像が荒れてしまいあまり綺麗に表示できません。また、GIF画像自体を大きくしてしまうのも、あまり凝ったアニメーションにしている場合読み込み自体が遅くなってしまいます。
なので、文字数が多いテキストにこの表現を実装するときは、シームレスなGIF画像をリピートする方法が一番良いかと個人的には思います。
