マウスオーバー時にパステルカラーのアニメーションで文字が変化するボタンです。
目次
カラフルな文字ボタン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>ColorfulTextButton</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a id="colorful-btn" href="#" target="_blank">カラフルな文字ボタン</a>
<script src="./script.js"></script>
</body>
</html>body {
margin: 0;
padding: 0;
color: #FFFFFF;
background: #000000;
}
a {
text-decoration: none;
}
a#colorful-btn {
display: inline-block;
background: none;
color: #FFFFFF;
cursor: pointer;
margin: 0;
padding: 1em;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 48px;
z-index: 0;
}const ASCII_CHARS = "あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんアイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲンボ文字";
const COLORS = ["#f8a5c2", "#c5a5cf", "#f3d3ac", "#a1eafb", "#ffaf87", "#85dcba"];
class ColorfulButton {
constructor(_btn) {
this.el = _btn
this.txt = this.el.innerText
this.overColor = COLORS[0]
this.fps = 24
this.events()
}
events() {
this.el.addEventListener("mouseenter", () => this.onMouseEnter(), false)
this.el.addEventListener("mouseleave", () => this.onMouseLeave(), false)
}
onMouseEnter() {
this.over_active = true
this.el.innerHTML = ""
this.colorful()
}
colorful() {
let letters = this.txt.split("")
for (let i = 0; i < letters.length; i++) {
const span = document.createElement("span")
this.el.appendChild(span)
const letter = letters[i]
span.innerText = letter
if (letter != " ") {
let idx = ASCII_CHARS.indexOf(letter.toLowerCase())
let initChar = idx > 10 ? ASCII_CHARS[idx - 9] : ASCII_CHARS[0]
setTimeout(() => this.letterTo(span, initChar, letter), 60 * i)
}
}
}
onMouseLeave() {
this.over_active = false;
let spans = this.el.querySelectorAll("span");
spans.forEach(span => {
span.style.color = "#FFFFFF";
});
setTimeout(() => {
this.el.innerHTML = this.txt;
}, 300);
}
letterTo(span, from, to) {
let char = to;
let color = this.overColor;
if (from != to && this.over_active) {
const idx = ASCII_CHARS.indexOf(from);
color = COLORS[~~(Math.random() * COLORS.length)];
char = from;
setTimeout(() => this.letterTo(span, ASCII_CHARS[idx + 1], to), 1000 / this.fps);
}
span.style.color = color;
span.innerText = char;
}
}
const _btn = new ColorfulButton(document.querySelector("#colorful-btn"));実装方法
See the Pen ColorfulTextButton by SOLLUNA (@ygi) on CodePen.
HTML
headタグの中にCSSを読み込みます。
<link rel="stylesheet" href="css/style.css">body終了タグ直前にJSを読み込みます。
<script src="js/script.js"></script>JS
使用する文字を指定します。
const ASCII_CHARS = "あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんアイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲンボ文字";ASCII_CHARS 変数にはひらがな、カタカナ、漢字は(文字)二文字だけセットされています。必要に応じて、漢字やアルファードなどを追加してください。
色をRGBで指定します。
const COLORS = ["#f8a5c2", "#c5a5cf", "#f3d3ac", "#a1eafb", "#ffaf87", "#85dcba"];マウスオーバー時に文字が徐々に変化し、マウスが離れると元のテキストに戻る機能が付与されています。
色の変化はランダムで選ばれパステルカラーの配列から選択されます。