iTyped.jsでタイピングアニメーション+自前実装
ウェブサイト上でタイピングアニメーションを実現するライブラリはTyped.jsがメジャーで高機能だが、jQueryに依存している。
機能がシンプルなものでよければiTyped.jsが良さげ。2KBとファイルサイズも小さい。
iTyped.jsのサンプル
<html>
<head>
</head>
<body>
<style>
body {
color: white;
background-color: black;
letter-spacing: 0.2em;
font-size: 12pt;
line-height: 1.7em;
}
p {
margin-top: 20px;
border: 2px solid white;
border-radius: 4px;
padding: 20px;
max-width: 600px;
min-height: 1.8rem;
}
.cursor,
.ityped-cursor {
font-size: 1rem;
opacity: 1;
animation: blink 0.3s infinite;
animation-direction: alternate;
}
@keyframes blink {
100% {
opacity: 0;
}
}
@-webkit-keyframes blink {
100% {
opacity: 0;
}
}
@-moz-keyframes blink {
100% {
opacity: 0;
}
}
</style>
<p>
<span id="ityped-js-sample"></span>
</p>
<script src="https://unpkg.com/ityped@1.0.3"></script>
<script>
window.onload = function() {
// iTyped.js
ityped.init(document.getElementById("ityped-js-sample"), {
strings: ["これはiTyped.jsのサンプル"],
startDelay: 0,
loop: false,
showCursor: true,
onFinished: function(){
document.querySelector(".ityped-cursor").style.display = "none";
}
});
</script>
</body>
</html>自前実装のサンプル
表示途中で画面をクリックしたら全テキストをすぐに表示というのがやってみたかったので軽く自前実装してみた。
<p>
<span id="my-typed-sample"></span>
</p>
<script>
window.onload = function() {
// 自前
const cursor = document.createElement("span");
cursor.className = "cursor"
cursor.innerText = "|";
const wholeText = "こちらは自前実装のサンプル";
let currentText = "";
const typetest = document.getElementById("my-typed-sample");
const chars = Array.from(wholeText);
let position = 0;
const timerId = setInterval(function(){
if (chars[position] == undefined) {
clearInterval(timerId);
cursor.style.display = "none";
return;
}
currentText += chars[position];
typetest.innerText = currentText;
typetest.insertAdjacentElement("beforeend", cursor);
position++;
}, 150);
// クリックしたら全部表示
window.addEventListener("click", function(){
typetest.innerText = wholeText;
typetest.insertAdjacentElement("beforeend", cursor);
cursor.style.display = "none";
clearInterval(timerId);
});
}
</script>モリモリカスタマイズしたければ自前での実装も難しくはないようだ。
ただ並べてみるとiTypedの方がカーソルの表示が自然だなー。
