Korean English Japanese

[JavaScript] 타이핑 애니메이션 효과 - JQuery

타이핑 애니메이션 효과

라이브러리를 통해서 쉽게 타이핑 애니메이션 효과를 적용할 수 있습니다. 순서대로 아래와 같이 설정한다면 5분 내에 적용이 가능합니다. 중요한 것은 타이핑 효과를 적용하고자 하는 곳에 블록(HTML)을 넣고 자바스크립트 언어로 구현합니다.

CDN / JQeury 라이브러리를 불러옵니다.

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://www.cssscript.com/demo/simple-typewriter-effect-pure-javascript-typewriterjs/typewriter.js"></script>
<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>

사용하고자 하는 위치에 HTML 블럭을 만듭니다.

<div id="typing"></div>

자바스크립트 언어 코드로 텍스트를 적용합니다.

<script>

var typing = document.getElementById('typing');
var typewriter = new Typewriter(typing, {
    loop: true
});

typewriter
        .typeString('첫번째 텍스트')
    .pauseFor(1500)
        .deleteAll()
        //.typeString('<br/>')
    .typeString('두번째 텍스트')
    .pauseFor(1500)
        .deleteAll()                        
        //.typeString('<br/>')        
    .typeString('세번째 텍스트')
        .pauseFor(2500)
    .start();
</script>

위는 예시이며, 다양한 효과를 적용할 수 있습니다. 메서드에 따라서 타이핑 속도나 타이핑 전환 속도 등을 구현할 수 있습니다.

옵션(Options)

Name Type Default value Description
strings String or Array null Strings to type out when using autoStart option
cursor String Pipe character String value to use as the cursor.
delay 'natural' or Number 'natural' The delay between each key when typing.
loop Boolean false Whether to keep looping or not.
autoStart Boolean false Whether to autostart typing strings or not. You are required to provide strings option.
devMode Boolean false Whether or not to display console logs.
wrapperClassName String 'Typewriter__wrapper' Class name for the wrapper element.
cursorClassName String 'Typewriter__cursor' Class name for the cursor element.

메소드(Methods)

Name Params Description
start - Start the typewriter effect.
stop - Stop the typewriter effect.
pauseFor ms Time to pause for in milliseconds Pause for milliseconds
typeString string String to type out, it can contain HTML tags Type out a string using the typewriter effect.
deleteAll speed Speed to delete all visibles nodes, can be number or 'natural' Delete everything that is visible inside of the typewriter wrapper element.
deleteChars amount Number of characters Delete and amount of characters, starting at the end of the visible string.
callFunction cb Callback, thisArg this Object to bind to the callback function Call a callback function. The first parameter to the callback elements which contains all DOM nodes used in the typewriter effect.
changeDeleteSpeed speed Number or 'natural' The speed at which to delete the characters, lower number is faster.
changeDelay delay Number or 'natural' Change the delay when typing out each character

메서드는 위와 같은 규칙을 같습니다. typeString 내에 HTML 코드를 작성할 수 있습니다.