- TOP >
- 制作覚書 >
- デザインコーディング >
- 文字がタイプライターみたいに一文字づつ表示されるアニメーション
- 制作覚書
文字がタイプライターみたいに一文字づつ表示されるアニメーション
サイトのファーストビューや、スクロール時のキャッチコピー等、強調したい文章に使うと効果的なアニメーション処理。
① jquery無し
HTML
<div class="typW"><div id="typ"></div></div>
Javascript
<script> var i=0; var printString; var moji="Good for living"; function typetext() { document.getElementById("typ").innerText=moji.substring(0,i++); if(i<=moji.length) { setTimeout("typetext()",100); } } </script>
② jquery有り
HTML
<div class="typW"><div id="typ"></div></div>
Javascript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <style type="text/css" media="screen"> .typ { opacity: 0; } .typ span { opacity: 0; } </style> <script type="text/javascript"> $(window).on('load',function(){ // ここから文字を<span></span>で囲む記述 $('.typ').children().andSelf().contents().each(function() { if (this.nodeType == 3) { $(this).replaceWith($(this).text().replace(/(\S)/g, '<span>$1</span>')); } }); // ここから一文字ずつフェードインさせる記述 $('.typ').css({'opacity':1}); for (var i = 0; i <= $('.typ').children().size(); i++) { $('.typ').children('span:eq('+i+')').delay(100*i).animate({'opacity':1},100); }; }); </script>
③ 複数段落
HTML
<div class="typW"> <p id="typA">Good for living</p> <p id="typB">アナタの「住みやすい」を見つけます</p> </div>
Javascript
<script type="text/javascript"> /* ----- option ----- */ var id = ['typA','typB']; //指定するidを全て配列で渡す var txSp = 100; // テキストの表示速度 var dly = 1000; // 次の文章までの待ち時間 /* ----- option ----- */ var count = 0; var tx = []; var txCount = []; window.onload = function(){ hihyoji(); mijisu(); hyouji(); } function mijisu(){ // 文字数カウントの初期設定 for(n=0;n<id.length;n++){ txCount[n] = 0; } } function hihyoji(){ // 要素をtx[i]に保持させ、非表示にする for(i=0;i<id.length;i++){ id[i] = document.getElementById(id[i]); tx[i] = id[i].firstChild.nodeValue; // 初期の文字列 id[i].innerHTML = ''; } } function hyouji(){ // 一文字ずつ表示させる id[count].innerHTML = tx[count].substr( 0, ++txCount[count] )+"_"; // テキストの指定した数の間の要素を表示 if(tx[count].length != txCount[count]){ // Count が初期の文字列の文字数と同じになるまでループ setTimeout("hyouji()",txSp); // 次の文字へ進む }else{ id[count].innerHTML = tx[count].substr( 0, ++txCount[count] ); // テキストの指定した数の間の要素を表示 count++; // 次の段落に進む為のカウントアップ if(count != id.length){ // id数が最後なら終了 setTimeout("hyouji()",dly); // 次の段落へ進む } } }</script>