LEARN

[JavaScript]Typewriting 애니메이션

 

[JavaScript]Typewriting 애니메이션

<!DOCTYPE html>
<html lang="en">
<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">

    <!-- jquery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    
    <title>Document</title>

</head>
<body>

    <button>button</button>
    <h1>abcde</h1>

    <script>

        // 버튼을 누르면 
        // 0.5초 후에 a를 h1에 입력
        // 0.5초 후에 b를 h1에 입력(더함)
        // 0.5초 후에 c를 h1에 입력(더함)


        var h1Tag = document.querySelector('h1');
        var text = document.querySelector('h1').innerHTML;//h1에 원래 있던 글자

        setTimeout(function(){
            console.log(1111) //1000밀리센커든(1초) 후에 실행되는 코드
        },1000); 

        $('button').click(function(){

            typeAnimation(h1Tag,text);
            
        });

        //함수로 만들어서 여러번 사용 
        function typeAnimation(h1Tag,text){ //함수 사용할 때는 파라미터를 추가해줘야 한다

            h1Tag.innerHTML = ''; //$('h1').html(''); ->제이커리 사용할 경우
            
            for(let i=0; i<text.length; i++){ //반복문이 먼저 순식간에 돌고 안에 코드 실행되기 때문에 text가 undifined된다 
                //text가 undifined 되는 에러 해결방법: var -> let으로 바꿔준다.
                setTimeout(function(){
                h1Tag.innerHTML = h1Tag.innerHTML + text[i]; //반복문 다 돌고 난서 오니 i=6이 되어버림 
                                                    //h1에 원래 있던 첫번째 글자
            },500*i);
            }

            // setTimeout(function(){
            //     h1Tag.innerHTML = h1Tag.innerHTML + text[0];
            //                                         //h1에 원래 있던 첫번째 글자
            // },500);
            // setTimeout(function(){
            //     h1Tag.innerHTML = h1Tag.innerHTML + text[1];
            //                                         //h1에 원래 있던 두번째 글자
            // },1000);
        }

    </script>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
  <div>
    <button onclick="typewrite()">버튼</button>
    <h1>abcde</h1>
  </div>

  <script>
      
    // 1. 버튼을 클릭하면 
    function typewrite(h1, h1Text){
    
        var h1 = document.querySelector("h1");
        var h1Text = document.querySelector("h1").innerHTML;

      // 2. h1 안을 비운다.
      h1.innerHTML = ''; // 제이쿼리 : $("h1").empty();

      // 3. a,b,c,d,e 각각 0.5초 후에  h1 안에 더함
      for(let i =0; i<h1Text.length; i++){
        setTimeout(function(){
            h1.innerHTML = h1.innerHTML + h1Text[i];
          },500*i);
      }
      // for문을 다 돌고 나서 setTimeout이 실행되기 때문에 i가 undefined가 된다.
      // 해결방법 -> 변수를 var가 아닌 let을 사용하면된다. 
    };

  </script>
</body>
</html>
RELATED POST