Scroll to Begin
【CSS】transition-delayを使って、テキストを1文字ずつアニメーションさせる方法
前回のページを見ていない方は、まずこのページをみてください。

今回は、animationではなく、transition-delayを使ってアニメーションさせます。
//文字を表示させるところ
const animationTarget = document.querySelector(".Text");
const texts = animationTarget.textContent;
textsArray = [];
animationTarget.textContent = "";
//HTMLの生成
for (let j = 0; j < texts.split("").length; j++) {
const textT = texts.split("")[j];
if (textT === " ") {
textsArray.push(" ");
} else {
textsArray.push(
'<span class="ani" style="transition-delay: ' + // ここがポイント
(j * 0.1 + 0.5) +
's;">' +
textT +
"</span>"
);
}
}
//文字の書き出し
for (let k = 0; k < textsArray.length; k++) {
animationTarget.innerHTML += textsArray[k];
}
//一文字ずつクラスを付与
const ani = document.querySelectorAll(".ani");
setTimeout(animation, 100);
function animation(){
ani.forEach(element => {
element.classList.add("ani1");
});
}
CSS
.Text {
position: relative;
height: 100px;
display: flex;
justify-content: center;
}
.Text .ani {
font-size: 2em;
color: blue;
text-shadow: 3px 3px 5px #fff;
font-weight: bold;
transform: translateX(-200px);
transition: all 0.5s ease;
opacity: 0;
}
.Text .ani.ani1 {
transform: translate(0px);
opacity: 1;
}

transitionとtransformで、クラスが付与されたらアニメーションさせる。
setTimeoutで画面が読み込まれてから100ms後にクラスを追加
こんな記事も読まれています。
-
【HTML】【CSS】【javascript】電卓の作り方
電卓のソースコードを2つ紹介します。javascriptはわずか数行で書けます。
-
【JacvaScript】【CSS】たった4行のJavaScriptでできるハンバーガーメニューの作り方
たった4行のJavaScriptで作るハンバーガーメニューの作り方について紹介します。✖をつくるには、transform-originがポイントです。
- リンク
-
波紋エフェクトを表現するjqueryのripples-min.jsの使い方
jqueryのripples-min.jsを使うと簡単に水面の波紋を表現できます。波紋の広がりの速度、波紋の大きさ、波紋のブレの値を変えていろいろ表現させると面白いです。
-
【Javascript】querySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法。
JavascriptのquerySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法について解説します。querySelectorと同じように書いてしまうとエラーがでます。forEachを使うとすべてに適用できます。
- リンク
-
要素の高さを取得する方法。getBoundingClientRectとは?window.innerHeightとは?window.pageYOffsetとは?
要素の高さを取得する方法について解説します。getBoundingClientRect、window.innerHeight、window.pageYOffsetについて理解し、要素がいつ画面に現れるかを把握できるようにしましょう。
-
Javascriptを使ったページネーションの実装
トップページの記事が増えてきたので、何とかページネーションで最新の記事だけを表示できないかと思っていたら、いい記事を発見しました。カスタマイズして実装することができました。
- リンク
-
【Javascript】マウスの指す(X, Y)座標とドラッグ & ドロップを理解する
マウスの指す(X, Y)座標とドラッグ & ドロップについて解説します。mousedown, mouseover, mousemove, mouseupを使います。
-
【javascript】連想配列をテーブルできれいに表示する方法
javascript(Object.entries)を使って、連想配列の中身をテーブルできれいに表示する方法について紹介します。
- リンク