Edited at

テキストを1文字ずつフェードインさせる方法

More than 1 year has passed since last update.


デモ


コード


HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<h1 id="title">Sample Text</h1>


CSS

#title {

color: #fff;
font-size: 48px;
}


JS

$(function() {

var $allMsg = $('#title');
var $wordList = $('#title').html().split("");
$('#title').html("");
$.each($wordList, function(idx, elem) {
var newEL = $("<span/>").text(elem).css({ opacity: 0 });
newEL.appendTo($allMsg);
newEL.delay(idx * 70);
newEL.animate({ opacity: 1 }, 1100);
});
});


参考

Fade in letter by letter with JQuery - Stack Overflow