文字をアニメーションさせて目立たせるやり方です。
見出しに使ったりワンポイントに使ったりいろいろできると思います。
この記事では以下のpタグの文字をアニメーションさせていきます。
<p id="text">あいうえお</p>
文字の色を変える
まずは簡単な色を変えるアニメーションです。
#text {
animation: color-loop 1s infinite;
}
@keyframes color-loop {
0% {
color: red;
}
50% {
color: blue;
}
100% {
color: red;
}
}
「animation: color-loop 1s infinite」はcolor-loopを1秒間で繰り返し(infinite)行うという意味です。
@keyframesは時間のどの割合の時に何を変更するかを指定します。赤から50％で青になり100％で赤に戻るという内容です。
もちろんこの割合をもっと細かく設定したり色の数を増やしたりできます。
文字を拡大縮小させる
#text {
display: inline-block;
animation: scale-loop 1s infinite;;
}
@keyframes scale-loop {
0% {
transform: scale(1, 1);
}
50% {
transform: scale(2, 2);
}
100% {
transform: scale(1, 1);
}
}
scale()で拡大縮小をさせることができます。拡大縮小したい倍率を指定すればOKです。(X方向 、Y方向)になっています。
一つ注意なのが「display: inline-block」を指定しておく必要があることです。これが無いと変化する幅が文字列の幅より大きくなってしまいX軸方向で大きくずれてしまいます。
一文字ずつずらしてアニメーションさせる
最後に文字列を一文字ずつずらしてアニメーションさせてみます。
まずはCSSはこんな感じです。
#text {
/*今回は無しです*/
}
#text span {
display: inline-block;
animation: scale-loop 1s infinite linear;
}
#text span:nth-child(2) {
animation-delay: 0.1s;
}
#text span:nth-child(3) {
animation-delay: 0.2s;
}
#text span:nth-child(4) {
animation-delay: 0.3s;
}
#text span:nth-child(5) {
animation-delay: 0.4s;
}
span:nth-child(n)は文字の数だけ用意しておきます。今回は5文字なので5までしか作っていません(１は遅らせる必要が無いのでありません)。
animation-delayはアニメーションを遅らせたい時間です。
次にjavascript。
window.addEventListener("load", function(){
textAnimation();
});
function textAnimation(){
var elm = document.getElementById("text");
var text = elm.innerHTML;
for(let i = 0; i < text.length; i++){
html += "<span>" + text[i] + "</span>"
}
elm.innerHTML = html;
}
id=textの文字を取得して文字を分割してspanタグで挟んでいます。
これで一文字ずつ指定した時間分遅れてアニメーションします。
javascriptだけで作ってみた
上のサンプルのjavascriptを改造してcssを減らして楽にできるようにしてみました。
window.addEventListener("load", function(){
textAnimation("text", 0.1);
});
function textAnimation(id, delayTime){
var elm = document.getElementById(id);
if(!elm)return;
var text = elm.innerHTML;
elm.innerHTML = "";
for(let i = 0; i < text.length; i++){
const span = document.createElement('span');
const node = document.createTextNode(text[i]);
span.appendChild(node);
span.style.animationDelay = delayTime * i + 's';
elm.appendChild(span);
}
}
これならCSSの「span:nth-child(n)」の部分をわざわざ記述する必要が無くなってとても楽ちんです。
引数でidと時間の間隔も指定できるようにしたので使い勝手もかなり良くなりました。
色＋拡大縮小で派手にアニメーション
最後に色も追加して派手に目立つようにしました。