[REQ_ERR: 405] [KTrafficClient] Something is wrong. Enable debug mode to see the reason. 文字がタイプライターみたいに一文字づつ表示されるアニメーション | マイニチ!

キシコウイチロウのポートフォリオ&制作覚書

キシコウイチロウのポートフォリオ&制作覚書

  1. TOP ＞
  2. 制作覚書 ＞
  3. デザインコーディング ＞
  4. 文字がタイプライターみたいに一文字づつ表示されるアニメーション

文字がタイプライターみたいに一文字づつ表示されるアニメーション

サイトのファーストビューや、スクロール時のキャッチコピー等、強調したい文章に使うと効果的なアニメーション処理。

① jquery無し

DEMO

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有り

DEMO

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>

③ 複数段落

DEMO

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>

PRICE 主な受注案件

グラフィックデザイン 会社案内、カラログ、広告、チラシ、CDジャケット ¥50,000~
WEB/UIデザイン コーポレート、ポータル、ランディングページ、バナー各種 ¥50,000~
コーディング/システム構築 動的なサイトやレスポンシブサイト、WordPressへの移行 ¥50,000~
起業のお手伝い一式 ロゴ、名刺、会社案内、その他販促物、ホームページ ¥98,000~