一文字ずつ出現するアニメーション

input に入力した文字が一文字ずつ表示されていく

See the Pen
by ぼぶ@朝活input中 (@bobu_6326)
on CodePen.

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
    crossorigin="anonymous"></script>
</head>
<body>

  <input type="text" placeholder="ここに入力">
  <div class="box"></div>



</body>
</html>

JQuery

$(function(){
  $('input').on('change',function(){
    $('.box').empty();
    let word = $('input').val();
    let word_part = word.split("");
    let word_count = word.length;

    for(let i=0;i<word_count; i++){
      $('.box').append('<span>'+word_part[i]+'</span>');
      $('.box span').hide();
      $('.box span').eq(i).delay(i*500).fadeIn();
    }
  })
});

解説

HTML の input type=”text” に入力した文字が box 内の span として一文字ずつ表示されていく

JQuery

  • $(‘input’).on(‘change’,function(){ } = input の内容が書き換えられた時にイベントを起こす
  • $(‘.box’).empty(); = .box の子要素を全消去する
  • let word = 変数。input に入力された文字を取得する
  • let word_part = 配列。word に取得した文字を .split(“”) で一文字ずつに分解する
  • let word_count = 変数。word に取得された文字の文字数を取得
  • for で word_count に取得された値分ループさせる
  • $(‘box’).append(1) = .box 直下に<span> 変数word_part[i] </span> を追加する [i] をつける事により、ループの度に次の文字が表示されていく
  • $(‘.box span’).hide() = .box span を表示されなくする
  • $(‘.box span’).eq(i).delay(i*500).fadeIn(); = .box span の一文字につき 0.5秒ずつ遅れて(delay(i*500))表示(fadeIn)させる
jquery.logo

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

bobuのアバター bobu Webクリエイター

ホームページ制作、リメイク、バナー、画像制作を行っています。
毎朝5:00-7:00 まで朝活で ITの知識を インプット+ Twitter へアウトプット。
お仕事のご依頼は「お問い合わせページ」からご連絡ください。