先日、TOFUラボにてCSSアニメーションの勉強会をさせていただきました！
ありがとうございました！
そこでタイピング風のテキストアニメーションを作りたい、というお声があったので
本日はElementor + ちょこっとコード（CSSとJS）を加えて作る方法を解説してまいります。
もちろんコピペOKです！ご活用くださいませ〜
こんなアニメーションを作ります
See the Pen タイピング風アニメーション by Maeda (@tasogare-design-office) on CodePen.
ちょこっとCSSとJava Script コードを追加すればできますよ〜
まずはElementor で構築
見出しを追加します。
HTMLタグをお好みのものに変えてください！
※ ページの見出し → h1
セクション見出し → h2〜
装飾用 → div, span
文章 → p
今回はpにしてます。
コードを追加しよう！
コードの紹介
CSSはカーソルを点滅させるだけで、JavaScriptでアニメーションをかけています！
（コードはもちろんChatGPTに手伝ってもらってます〜）
<style>
.cursor {
display: inline-block;
height: 1.2em;
vertical-align:-0.18em;
border-right: 1px solid currentColor;
animation: blink 1s step-end infinite;
}
@keyframes blink {
50% { border-color: transparent; }
}
</style>
<script>
document.querySelectorAll('.typing p').forEach((p) => {
const originalNodes = Array.from(p.childNodes);
const elements = [];
originalNodes.forEach((node) => {
if (node.nodeType === Node.TEXT_NODE) {
elements.push(...node.textContent.split(''));
} else if (node.nodeName === 'BR') {
elements.push('<br>');
}
});
p.textContent = '';
const cursor = document.createElement('span');
cursor.className = 'cursor';
cursor.innerHTML = ' ';
p.appendChild(cursor);
let index = 0;
let animationStarted = false;
function typeNextChar() {
if (index < elements.length) {
const item = elements[index];
if (item === '<br>') {
cursor.insertAdjacentHTML('beforebegin', '<br>');
} else {
cursor.before(document.createTextNode(item));
}
index++;
setTimeout(typeNextChar, 80); // ←表示速度
}
}
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting && !animationStarted) {
animationStarted = true;
typeNextChar();
observer.unobserve(entry.target);
}
});
},
{
root: null,
rootMargin: '0px 0px -30% 0px', // ←位置調整
threshold: 0
}
);
observer.observe(p);
});
</script>
※見出しのタグがpではない場合、変更が必要なのでご注意ください！
※タイピングの速度は46行目、開始タイミング62行目で、お好みで調整してください！
どこに入れる？
Elementor Proの方
Elementor > custom code > new code から入れましょう！
※今回JSメインなので、位置はbody endの方が確実に作動するので、そうしています〜
Elementor無料版の場合
単体のページに適用させるなら、該当ページのelementor画面でコンテンツの一番下に
HTMLウィジットに入れちゃうのが早いです！
これでもちゃんと動きますよ〜
複数ページで使いたい場合には、WP code などのプラグインを使うのがおすすめです！
無料でCSSもJSもPHPもかけますよ！
どうしてもノーコードでやりたい人へ
コードアレルギーの方で、crocoblockをお持ちの方に朗報です！
crocoblock の JetElementsのAnimated Text Widget を使えば同じようなアニメーションをつけることができます。
https://crocoblock.com/widgets/animated-text/ まとめ
コードは長いですが、コピペするだけなので簡単に実装できます〜！ぜひお試しください！
本日もお疲れ様でした！