文字をアニメーションさせて目立たせるやり方です。
見出しに使ったりワンポイントに使ったりいろいろできると思います。
この記事では以下の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軸方向で大きくずれてしまいます。
#text {
display: inline-block;
animation: rotate-loop 1s infinite linear;
}
@keyframes rotate-loop {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
linearは変化を等間隔で変化するようにする指定です。
scaleは度(degree)で指定します。マイナスの値にすると反対に回ります。
最後に文字列を一文字ずつずらしてアニメーションさせてみます。
まずは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までしか作っていません(1は遅らせる必要が無いのでありません)。
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を改造して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と時間の間隔も指定できるようにしたので使い勝手もかなり良くなりました。
最後に色も追加して派手に目立つようにしました。
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント