左から右に文字色が自然に変わるテキストアニメーションです。
テキストアニメーションDEMO
まずは実装内容を確認しましょう、DEMOページをご覧ください。
コピペ用実装コード
index.html style.css script.jsを作成し、以下のコードを貼り付けてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>テキストアニメーション</title>
<meta name="Keywords" content="テキストアニメーション" />
<meta name="Description" content="テキストアニメーション" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="text">SOLLUNA</h1>
<script type="text/javascript" src="script.js"></script>
</body>
</html>* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: black;
}
h1 {
color: white;
font-size: 4rem;
font-family: sans-serif;
text-align: center;
line-height: 100vh;
}
span {
transition: all 0.5s ease;
}const text = document.querySelector(".text");
const splitText = [...text.textContent];
text.textContent = "";
text.innerHTML = splitText.map(char => `<span>${char}</span>`).join("");
const colors = ["rgb(237, 42, 121)", "rgb(252, 238, 50)", "rgb(129, 6, 181)", "rgb(73, 141, 197)"];
let currentColorIndex = 0;
const runAnimation = () => {
let char = 0;
const timer = setInterval(() => {
const span = text.querySelectorAll('span')[char];
span.style.color = colors[currentColorIndex];
span.classList.add('fade');
char++;
if (char === splitText.length) {
complete();
return;
}
}, 50);
const complete = () => {
clearInterval(timer);
setTimeout(() => {
text.style.color = colors[currentColorIndex];
text.querySelectorAll('span').forEach((span) => {
span.classList.remove('fade');
span.style.color = "";
});
currentColorIndex = (currentColorIndex + 1) % colors.length;
runAnimation();
}, 1000);
}
};
runAnimation();実装方法
See the Pen テキストアニメーション by SOLLUNA (@ygi) on CodePen.
HTML
headタグの中にCSSを読み込みます。
<link rel="stylesheet" href="css/style.css">body終了タグ直前にJSを読み込みます。
<script src="js/script.js"></script>CSS
文字表示場所を指定します。
h1 {
color: white;
font-size: 4rem;
font-family: sans-serif;
text-align: center;
line-height: 100vh;
}文字アニメーションを指定します。
span {
transition: all 0.5s ease;
}0.5sは0.5秒でアニメーションを完了させる意味です。
transition-timing-functionプロパティはアニメーションのタイミングを制御するための関数です。ease緩やかに始まり途中で速くなり緩やかに終わるease-in緩やかに始まるease-out緩やかに終わるease-in-out緩やかに始まり緩やかに終わるlinear一定の速さで進む
JS
色をRGBで指定します。
const colors = ["rgb(237, 42, 121)", "rgb(252, 238, 50)", "rgb(129, 6, 181)", "rgb(73, 141, 197)"];間隔や一周した後の表示時間など指定します。
const runAnimation = () => {
let char = 0;
const timer = setInterval(() => {
const span = text.querySelectorAll('span')[char];
span.style.color = colors[currentColorIndex];
span.classList.add('fade');
char++;
if (char === splitText.length) {
complete();
return;
}
}, 50);
const complete = () => {
clearInterval(timer);
setTimeout(() => {
text.style.color = colors[currentColorIndex];
const spans = text.querySelectorAll('span');
let i = 0;
const timer = setInterval(() => {
spans[i].classList.remove('fade');
i++;
if (i === spans.length) {
clearInterval(timer);
currentColorIndex = (currentColorIndex + 1) % colors.length;
runAnimation();
}
}, 50);
}, 1000);
}
};setInterval()関数は指定した時間間隔で繰り返し関数を実行するメソッドです。
この場合50msごとにsetInterval()関数が呼び出され1文字ずつspan要素に適用されるアニメーションが行われます。50msは文字列中の1文字が変化するまでの時間です。
50msは(1秒÷1000×50)0.05秒です。
setTimeout()関数は一定時間が経過した後に一度だけ指定されたコードを実行するメソッドです。
この場合は文字列SOLLUNAが表示された後1000ms経過してからまた文字列SOLLUNAが表示されます。
1000msは1秒です。
応用編
文字を上下に動かす
DEMOページをご覧ください。
See the Pen テキストアニメーション上下 by SOLLUNA (@ygi) on CodePen.
span {
transition: all 0.5s ease;
position: relative;
top: -10px;
}
span.fade {
top: 0;
}spanにposition: relative;とtopプロパティの初期値を-10pxに設定、.fadeクラスが付与された各文字が-10px移動し.fadeクラスが削除されると同時に上に戻るようになります。