[js+css]一文字ずつフェードインさせるやつを作る方法

簡単。

完成イメージ
構築の考え方
やっていく
で区切る方法について
ネックになる部分

完成イメージ

WEBサイトのキャンペーンページとかでたまにあるやつ。

ページを読み込んだ際に一文字ずつフェードインする、いっぱいついてるとまだるっこいアレ。

構築の考え方

フェードインはcssで仕込む。フェードインの前と後のstyleをclassの付与で切り替える。

フェードインのタイミングはjs（jQuery）で仕込む。一定スパンでclassを付与していく。

animateを個別に作ればcssで完結できるけど、一文字ずつ設定しなきゃいけないので組むのがめんどくさいし、増減したときもめんどくさい。だから発火のタイミングはjsでやっていこうって感じ。

<div class="target"><span>あ</span><span>あ</span><span>あ</span><span>あ</span><span>あ</span><span>あ</span></div>

一文字ずつフェードインするから文字をそれぞれ拾えるようにタグで分ける。eachで回して順番にspanを拾って、classを付けていく。

やっていく

手打ちはだるいんで、これもjsでやったらいいんじゃんね。

HTMLでこういうのがあったとして。

<div class="target">ああああああ</div>

CSSをこんな感じにする。

.target span{
    display: inline-block;
    position: relative;
    top: 20px;
    opacity: 0;
    transition: top .4s ease, opacity .4s ease;
}
.target span.active{
    top: 0;
    opacity: 1;
}

指定要素内の文字列をで区切る。こう、というかこちらのまんま。

        $('.target').each(function() {
            var content = $(this).html();
            var trimText = $.trim(content);
            var newText = "";
        
            trimText.split("").forEach(function(e) {
              if(e == ' '){
                // 空白対策
                newText += '<span> </span>';
              } else {
                newText += '<span>' + e + '</span>';
              }
            });
            $(this).html(newText);
          });

で、こう。

　　　　var delayTime = 2000;
        $('.target').find('span').each(function(){
            $(this).delay(delayTime).queue(function(){
                $(this).addClass('active');
            })
            delayTime = delayTime + 100;
        })

最初の2000は表示するまでのディレイで、後にある100は文字ごとのディレイ。一定間隔でclassを付与するようになる。

なんでjsを分けて書いてあるかは、次の内容にかかわる話。

で区切る方法について

上記の方法だと一部の状況で難点がある。

js側で文字を区切りにするから楽なんだけど、テキスト内にHTMLタグがあった場合、それも一文字ずつ区切られるのでタグとして成り立たなくなる。

だから、単純にテキスト情報だけを入れるならjsで自動化すればいいけど、中で改行したいとかになった場合、の挿入は手打ちにしたほうがいい。

ネックになる部分

.delay()を使用する場合、そのまま.addClass()とかをつなげても動かない。

今回は.queue()をかませることで動くというケース。