Forked from: kathewka's jQueryで文章を1文字ずつアニメーション表示(複数行対応) View Diff (3) forked: jQueryで文章を1文字ずつアニメーション表示(複数行対応) meqane Follow 2018-03-29 13:48:09 License: MIT License Fork0 Fav0 View264 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 23 lines HTML 18 lines CSS 37 lines forked: jQueryで文章を1文字ずつアニメーション表示(複数行対応) jQuery v1.8.3 // forked from kathewka's "jQueryで文章を1文字ずつアニメーション表示(複数行対応)" 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('<span>'+str[no].substr(j, 1)+'</span>');//1文字ずつ<span>を付けて $(self).children('span:last').delay(DELAY_SPEED * j).animate({opacity:'1'}, FADE_SPEED);//時間差でフェードインさせる } } }, 50); }); }); <p class='fadein'> <span>あ…ありのまま 今 起こった事を話すぜ!</span><br> <span>『おれは奴の前で階段を登っていたと</span><br> <span> 思ったらいつのまにか降りていた』</span><br> <span>催眠術だとか超スピードだとか</span><br> <span>そんなチャチなもんじゃあ 断じてねえ</span><br> <span>もっと恐ろしいものの片鱗を味わったぜ…</span><br> </p> <p> |l、{ j} /,,ィ//|<br> i|:!ヾ、_ノ/ u {:}//ヘ<br> |リ u' } ,ノ _,!V,ハ | <br> fト、_{ル{,ィ'eラ , タ人. <br> ヾ|宀| {´,)⌒`/ |<ヽトiゝ <br> ヽ iLレ u' | | ヾlトハ〉. <br> ハ !ニ⊇ '/:} V:::::ヽ. <br> /:::丶'T'' /u' __ /:::::::/`ヽ <br> </p> forked: jQueryで文章を1文字ずつアニメーション表示(複数行対応) .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ゴシック","MS Pゴシック","MSPゴシック","MSPゴシック","MS Pゴシック","MS PGothic",sans-serif; } /* firefox */ :-moz-read-only *{ font-family:Mona,"MS PGothic AA","MS Pゴシック","MS PGothic","MS Pゴシック","MS Pゴシック","MSPゴシック","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 Pゴシック","MS PGothic","MS Pゴシック","MS Pゴシック","MSPゴシック","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 Pゴシック","MS PGothic","MS Pゴシック","MSPゴシック","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 Pゴシック","MS PGothic","MS Pゴシック","MSPゴシック","MSPゴシック",sans-serif; } // forked from kathewka's "jQueryで文章を1文字ずつアニメーション表示(複数行対応)" 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('<span>'+str[no].substr(j, 1)+'</span>');//1文字ずつ<span>を付けて $(self).children('span:last').delay(DELAY_SPEED * j).animate({opacity:'1'}, FADE_SPEED);//時間差でフェードインさせる } } }, 50); }); }); <p class='fadein'> <span>あ…ありのまま 今 起こった事を話すぜ!</span><br> <span>『おれは奴の前で階段を登っていたと</span><br> <span> 思ったらいつのまにか降りていた』</span><br> <span>催眠術だとか超スピードだとか</span><br> <span>そんなチャチなもんじゃあ 断じてねえ</span><br> <span>もっと恐ろしいものの片鱗を味わったぜ…</span><br> </p> <p> |l、{ j} /,,ィ//|<br> i|:!ヾ、_ノ/ u {:}//ヘ<br> |リ u' } ,ノ _,!V,ハ | <br> fト、_{ル{,ィ'eラ , タ人. <br> ヾ|宀| {´,)⌒`/ |<ヽトiゝ <br> ヽ iLレ u' | | ヾlトハ〉. <br> ハ !ニ⊇ '/:} V:::::ヽ. <br> /:::丶'T'' /u' __ /:::::::/`ヽ <br> </p> .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ゴシック","MS Pゴシック","MSPゴシック","MSPゴシック","MS Pゴシック","MS PGothic",sans-serif; } /* firefox */ :-moz-read-only *{ font-family:Mona,"MS PGothic AA","MS Pゴシック","MS PGothic","MS Pゴシック","MS Pゴシック","MSPゴシック","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 Pゴシック","MS PGothic","MS Pゴシック","MS Pゴシック","MSPゴシック","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 Pゴシック","MS PGothic","MS Pゴシック","MSPゴシック","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 Pゴシック","MS PGothic","MS Pゴシック","MSPゴシック","MSPゴシック",sans-serif; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author meqane URLhttp://meqane.net/ Web designer / 酒とmacを愛しております Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/Y4FC/js"></script> animation css3 javascript jquery library&test Discussion Questions on this code? Tags animation css3 javascript jquery library&test