HTML
1 |
<div class="typing">一文字づつ表示させたい内容を入力</div> |
CSS
1 2 3 4 5 6 |
.typing { opacity: 0; } .typing span { opacity: 0; } |
JS
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(window).on('load',function(){ // テキストを<span></span>で自動的に囲む $('.typing').children().andSelf().contents().each(function() { if (this.nodeType == 3) { $(this).replaceWith($(this).text().replace(/(\S)/g, '<span>$1</span>')); } }); // 一文字ずつ表示させる $('.typing').css({'opacity':1}); for (var i = 0; i <= $('.typing').children().size(); i++) { $('.typing').children('span:eq('+i+')').delay(50*i).animate({'opacity':1},50); }; }); |
コメントを残す