forked: jQueryで文章を１文字ずつアニメーション表示（複数行対応）

Readme
JavaScript 23 lines
HTML 18 lines
CSS 37 lines

forked: jQueryで文章を１文字ずつアニメーション表示（複数行対応）
jQuery v1.8.3

forked: jQueryで文章を１文字ずつアニメーション表示（複数行対応）

.fadein span{
    opacity:0;
}

body { background-color: #DDDDDD; font: 30px sans-serif; }
    
/*アスキーアート向け指定*/
* {
	font-size:18pt;
	line-height:27px;
	font-style:normal;
	font-weight:normal;
	letter-spacing : 0;
}
/* Opera */
*{
	font-family:"IPA モナー Pゴシック","IPA mona PGothic","IPA MONAPGOTHIC",IPAMonaPGothic,Mona,"MS PGothic AA","ＭＳ Ｐゴシック","MS Pゴシック","ＭＳＰゴシック","MSPゴシック","MS Pｺﾞｼｯｸ","MS PGothic",sans-serif;
}
/* firefox */
:-moz-read-only *{
	font-family:Mona,"MS PGothic AA","ＭＳ Ｐゴシック","MS PGothic","MS Pｺﾞｼｯｸ","MS Pゴシック","ＭＳＰゴシック","MSPゴシック","IPA モナー Pゴシック","IPA mona PGothic","IPA MONAPGOTHIC",IPAMonaPGothic,sans-serif;
}
/* safari */
@media screen and (-webkit-min-device-pixel-ratio:0){
.entry_body dl {
	font-family:"MS PGothic AA","ＭＳ Ｐゴシック","MS PGothic","MS Pｺﾞｼｯｸ","MS Pゴシック","ＭＳＰゴシック","MSPゴシック",IPAMonaPGothic,"IPA モナー Pゴシック","IPA mona PGothic","IPA MONAPGOTHIC",Mona,sans-serif;
}
}
/* IE */
.entry_body dl{
	_font-family:Mona,"IPA モナー Pゴシック","IPA mona PGothic","IPA MONAPGOTHIC",IPAMonaPGothic,"MS PGothic AA","ＭＳ Ｐゴシック","MS Pゴシック","MS PGothic","MS Pｺﾞｼｯｸ","ＭＳＰゴシック","MSPゴシック",sans-serif;
}
*:first-child+html .entry_body dl{
	font-family:Mona,"IPA モナー Pゴシック","IPA mona PGothic","IPA MONAPGOTHIC",IPAMonaPGothic,"MS PGothic AA","ＭＳ Ｐゴシック","MS Pゴシック","MS PGothic","MS Pｺﾞｼｯｸ","ＭＳＰゴシック","MSPゴシック",sans-serif;
}

// forked from kathewka's "jQueryで文章を１文字ずつアニメーション表示（複数行対応）" http://jsdo.it/kathewka/rXbz var DELAY_SPEED = 30;//文字が流れる速さ var FADE_SPEED = 100;//表示のアニメーション時間 var str = []; $(document).ready(function(){ $('.fadein > span').each(function(i){//セレクタで指定した要素すべて $(this).css('opacity','1');//行を不透明にする str[i] = $(this).text();//元のテキストをコピーし $(this).text('');//テキストを消す var no = i; var self = this; var interval = setInterval(function(){//50ミリ秒毎にチェック if(no == 0 || $('.fadein > span').eq(no - 1).children('span:last').css('opacity') == 1){//最初の行または前の行が全文字表示された時 clearInterval(interval);//チェックを停止 for (var j = 0; j < str[no].length; j++) { $(self).append(''+str[no].substr(j, 1)+'');//1文字ずつを付けて $(self).children('span:last').delay(DELAY_SPEED * j).animate({opacity:'1'}, FADE_SPEED);//時間差でフェードインさせる } } }, 50); }); }); あ…ありのまま今　起こった事を話すぜ！ 『おれは奴の前で階段を登っていたと 　思ったらいつのまにか降りていた』 催眠術だとか超スピードだとか そんなチャチなもんじゃあ　断じてねえ もっと恐ろしいものの片鱗を味わったぜ… 　 |l､{　　j}　/,,ｨ//｜ 　 i|:!ヾ､_ﾉ／ u {:}//ﾍ 　 |ﾘ u' }　 ,ﾉ　_,!V,ﾊ | 　 fト､_{ﾙ{,ィ'ｅﾗ　, ﾀ人. 　ヾ|宀| {´,)⌒`/ |<ヽﾄiゝ 　　ヽ iLﾚ　u' |　| ヾｌﾄﾊ〉. 　　ﾊ !ニ⊇　'／:} 　V:::::ヽ. 　 /:::丶'T'' ／u'　__ /:::::::/｀ヽ .fadein span{ opacity:0; } body { background-color: #DDDDDD; font: 30px sans-serif; } /*アスキーアート向け指定*/ * { font-size:18pt; line-height:27px; font-style:normal; font-weight:normal; letter-spacing : 0; } /* Opera */ *{ font-family:"IPA モナー Pゴシック","IPA mona PGothic","IPA MONAPGOTHIC",IPAMonaPGothic,Mona,"MS PGothic AA","ＭＳＰゴシック","MS Pゴシック","ＭＳＰゴシック","MSPゴシック","MS Pｺﾞｼｯｸ","MS PGothic",sans-serif; } /* firefox */ :-moz-read-only *{ font-family:Mona,"MS PGothic AA","ＭＳＰゴシック","MS PGothic","MS Pｺﾞｼｯｸ","MS Pゴシック","ＭＳＰゴシック","MSPゴシック","IPA モナー Pゴシック","IPA mona PGothic","IPA MONAPGOTHIC",IPAMonaPGothic,sans-serif; } /* safari */ @media screen and (-webkit-min-device-pixel-ratio:0){ .entry_body dl { font-family:"MS PGothic AA","ＭＳＰゴシック","MS PGothic","MS Pｺﾞｼｯｸ","MS Pゴシック","ＭＳＰゴシック","MSPゴシック",IPAMonaPGothic,"IPA モナー Pゴシック","IPA mona PGothic","IPA MONAPGOTHIC",Mona,sans-serif; } } /* IE */ .entry_body dl{ _font-family:Mona,"IPA モナー Pゴシック","IPA mona PGothic","IPA MONAPGOTHIC",IPAMonaPGothic,"MS PGothic AA","ＭＳＰゴシック","MS Pゴシック","MS PGothic","MS Pｺﾞｼｯｸ","ＭＳＰゴシック","MSPゴシック",sans-serif; } *:first-child+html .entry_body dl{ font-family:Mona,"IPA モナー Pゴシック","IPA mona PGothic","IPA MONAPGOTHIC",IPAMonaPGothic,"MS PGothic AA","ＭＳＰゴシック","MS Pゴシック","MS PGothic","MS Pｺﾞｼｯｸ","ＭＳＰゴシック","MSPゴシック",sans-serif; }