[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 코드를 작성할 수 있습니다.