タイピング風効果
2013.10.24 Posted by Coding_team
今月もやってまいりました。
ウェブラボ技術メモです。
今回は文章を1文字ずつ表示させる効果をご紹介いたします。
文章だけではピンと来ないかと思いますので、
まずは、デモをごらんください！
いかがでしたでしょうか？
こちらのソースは、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script type="text/javascript"> $(window).bind('load',function(){ // ここで文字を<span></span>で囲む $('.tgt').children().andSelf().contents().each(function() { if (this.nodeType == 3) { $(this).replaceWith($(this).text().replace(/(\S)/g, '<span>$1</span>')); } }); // 一文字ずつフェードインさせる $('.tgt').css({'opacity':1}); for (var i = 0; i <= $('.tgt').children().size(); i++) { $('.tgt').children('span:eq('+i+')').delay(50*i).animate({'opacity':1},50); }; }); }); </script> |
HTML は、タイピング風にさせたい文字を下記のクラスを付与し、
p タグで囲みます。
|
1 |
<p class="tgt">foobar............</p> |
CSS は、
|
1 2 |
.tgt {opacity: 0;} .tgt span{opacity: 0;} |
では、もっとより、文字を打ち込んでいるように、カーソルを表示させてみます。
まずは、デモをごらんください！
文字の先頭の方に「_」が表示されていたと思います。
FABULOUS!!!
では、こちらのソースをご紹介致します。
まず、記述する script です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script type="text/javascript"> $(window).bind('load',function(){ $('.tgt2').children().andSelf().contents().each(function() { if (this.nodeType == 3) { $(this).replaceWith($(this).text().replace(/(\S)/g, '<span>$1</span>')); } }); $('.tgt2').append('<span class="cur">_</span>'); setInterval(function(){$('.cur').toggle();},200); $('.tgt2').css({'opacity':1}); for (var i = 0; i <= $('.tgt2').children().size() - 1; i++) { $('.tgt2').children('span:eq('+i+')').not('.cur').delay(50*i).fadeIn(10); }; }); </script> |
こんな感じになります。
では、HTML はどうでしょう！？
|
1 |
<p class="tgt2">fooobaaar................</p> |
なんということでしょう！
先ほどと変わりませんね。
では、次に CSS を見てみましょう！
|
1 2 3 |
.tgt2 {opacity: 0;} .tgt2 span {display: none; float: left;} .tgt2 span.cur {display: block;} |
先程よりもシンプルですね★
このような効果を使って、目立たせたい文字を装飾しても、
新鮮ですね★
以上、10月の技術メモでしたー(^^)
関連記事こちらの記事も合わせてどうぞ。
