最初は文字を全て非表示にしておいて、スクロールしたら1文字ずつ表示というのを今回はご紹介したいと思います。
また今回の実装では『inview.js』というjQueryのプラグインを使うので、『inview.js』の使い方についてはこちらの記事を参照下さい。
-
inview.jsでスクロールして表示領域に入ったらフェードインさせる方法【jQueryプラグイン】
続きを見る
（有料になっていたらすいません🙇♂️）
inview.jsを使ってスクロールしたら1文字ずつ表示させる方法
早速ですがこちらがデモになります。
See the Pen
スクロールすると1文字ずつ表示 by junpei (@junpei-sugiyama)
on CodePen.
もう一度最初から見たい場合は右下の『Rerun』をクリックして下さい。
冒頭にも書いた『inview.js』は『スクロールして要素が画面内に入ったら◯◯する』というものなので、今回の場合は『スクロールして非表示にしている文字が画面内に入ったら表示する』という形になります。
コード解説
コードを解説します。
まずHTMLはこちらになります。
<p class="text-animation">じゅんぺいブログ</p>1文字ずつ表示させるために1文字ずつspanタグで囲みますが、それはHTMLではなくjQueryの方でやるので、HTMLはそのままで大丈夫です。
CSSはこちらです。
.text-animation span {
opacity: 0;
}これはspanタグで囲まれた文字をopacity: 0;で透明にして見えなくてします（正確には『非表示』ではなく『見えない』になります）
HTMLにはspanタグはないので『？？』と思うかも知れませんが、先ほども書いた通りspanタグはjQueryによって囲まれるので大丈夫です。
なぜHTMLで直接spanタグを囲まないのかというと、文字数が増えたりしたら1つずつ囲むのが大変だからです。
そして重要なのがjQueryになります。
$(function () {
$(".text-animation").each(function () {
// 1文字ずつ<span>で囲む
$(this)
.children()
.addBack()
.contents()
.each(function () {
if (this.nodeType == 3) {
$(this).replaceWith(
$(this).text().replace(/(\S)/g, "<span>$1</span>")
);
}
});
// スクロールして要素が画面内に入ったら文字を表示
$(this).on("inview", function () {
// 1文字ずつ順番に表示(不透明にする)
$(this).css({ opacity: 1 });
for (var i = 0; i <= $(this).children("span").length; i++) {
$(this)
.children("span")
.eq(i)
.delay(200 * i) // 文字間の時間
.animate({ opacity: 1 }, 1000); // 全部表示されるまでの時間
}
});
});
});この中でご自身でカスタマイズする場合は、2行目の文字に対するclass名と、最後の時間の数字になります。
あとはopacityの部分をanimate()で使えるプロパティであれば変更可能です（数字で指定できるものだけなので、colorなどは不可）
例えば以下のようにフォントサイズを大きくすることも可能です。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
以上になります。
