kdcsライブラリー

＜この内容は不採用＞

タイトルや見出しなどを１文字ずつフェードインさせる記述で改行にも対応。

例はトップページのスライダー内のタイトルのもの

htmlの記述

<div class="catchPosition inner">
<div class="catchText1">キャッチコピー１<br>メインタイトル１</div>
</div><!--/.catchPosition-->

cssの記述
※ポイントは疑似要素:first-lineで１行目のスタイルを変更しているところ

.slick-box .catchPosition {
    width: 100%;
    margin: auto;
    color: #fff;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 200;
}

.slick-box .catchText1 {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 36px;
}
.slick-box .catchText1:first-line {
    font-size: 24px;
}
.catchText1,
.catchText1 span {
  opacity: 0;
}

javascript（jQery使用）
※ポイントはreplaceでbrタグをそのまま出力して改行に対応させているところ

$(window).on('load', function(){
    var text_wrap = '.catchText1'; //適用させる要素のクラス
    var delay_speed = 80; //文字が出るスピード(ミリ秒)
    var fade_speed = 500; //文字がフェードするスピード(ミリ秒)
    var str;
    $(text_wrap).css('opacity','1');
    var firsttxt = $(text_wrap).html();
    str = firsttxt.replace(/<br>/g,'\n');
    $(text_wrap).html('');
    for (var i = 0; i < str.length; i++) {
        $(text_wrap).append('<span class="text_span">'+str.substr(i, 1).replace(/\n/, "<br>")+'</span>');
        $(text_wrap).children('span:last-child').delay(delay_speed * i).animate({opacity:'1'}, fade_speed);
    }
    setTimeout(function(){$(text_wrap).html(firsttxt)},str.length*delay_speed+fade_speed);
});