루로그

9. Typewriting 애니메이션 만들기 본문

STUDY/JavaScript, jQuery 입문과 웹 UI개발

9. Typewriting 애니메이션 만들기

강력한루야 2022. 8. 30. 17:57

한글자씩 써지는 Typewriting 애니메이션 만들기

  • 버튼을 누르면 h1에 써있던 글자가 한글자씩 출현
  • 반복문에 .length 속성을 사용하여 h1 길이만큼 반복
  • setTimeout함수 사용
💡TIP  - 시간 지연 함수인 setTimeout을 사용하면 일정 시간 뒤 코드 실행
           - 반복문에서 변수 i를 var로 선언하면 마지막 값만 기억하기 때문에 let으로 선언해야 오류가 나지 않음
                ㄴ 참고 https://www.bangseongbeom.com/javascript-var-let.html
<!doctype html>
<html lang="ko">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <title>Typewriting 애니메이션</title>
    
    <style>     
        body {padding:30px}
    </style>
  
  </head>
  <body>
  
    <button>버튼</button>
    <h1>abcde</h1>  


    <!--스크립트-->
    <script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>


    <script>
        
        var h1태그 = document.querySelector('h1'); // h1 변수 선언
        var 원래글씨 = document.querySelector('h1').innerHTML; // h1 내용 변수 선언

        $('button').click(function(){ // 버튼 클릭 시
          h1태그.innerHTML = ''; // h1태그 속 내용을 공백으로 채워라
          for (let i = 0; i < 원래글씨.length; i++){ // 변수 i는 원래글씨 내용의 글자 길이만큼 반복되며, i는 1씩 커진다
            setTimeout(function(){ // 시간 지연 함수인 setTimeout을 사용하면 일정 시간 뒤 코드 실행
              h1태그.innerHTML = h1태그.innerHTML + 원래글씨[i] // 변수 h1태그의 내용(공백처리됨)에 i번째 원래글씨를 더한다 
            }, 500 + i*500); // 500의 배수마다 더해줌 (setTimeout 실행 시간 지정)
          }

        });
    </script>
  </body>
</html>

 

Typewriting 애니메이션

abcde

코딩애플 강의로 실습한 내용입니다
출처 : https://codingapple.com/
반응형

'STUDY > JavaScript, jQuery 입문과 웹 UI개발' 카테고리의 다른 글

8. Ajax로 서버에서 정보 받아오기  (0) 2022.08.30
7. 배열 값 데이터바인딩  (0) 2022.08.30
6. 인터랙티브 폼 만들기  (0) 2022.08.30
5. animate와 간단한 폼 검사  (0) 2022.08.30
4. 반복문 활용하여 tab기능 만들기  (0) 2022.08.30
'STUDY/JavaScript, jQuery 입문과 웹 UI개발' Related Articles more