타이핑 애니메이션 효과
라이브러리를 통해서 쉽게 타이핑 애니메이션 효과를 적용할 수 있습니다. 순서대로 아래와 같이 설정한다면 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 코드를 작성할 수 있습니다.
'Web Development > JavaScript' 카테고리의 다른 글
3초마다 모달창으로 "Hello" 구현하기 (0) | 2021.07.17 |
---|---|
[JavaScript] 버튼 클릭 제어 (0) | 2021.07.17 |
Simple Slider(JQuery) 심플한 슬라이더 (0) | 2021.07.17 |
제이쿼리를 해야하는 이유 (0) | 2021.07.17 |
탑버튼(topbtn) DOM 위치값 계산 (0) | 2021.07.17 |
다크 모드 라이트 모드 토글스위치 기능(Javascript/JQuery) (0) | 2021.07.17 |
[JavaScript] D-Day 타이머 (0) | 2021.07.17 |
jQuery / Method / .append() (문자열 추가) (2) | 2019.09.07 |