본문 바로가기
IT_Developers/Javascript

JavaScript- 타이핑 애니메이션 / typewriterjs

by 고코더 2019. 3. 21.

타자 치는 애니메이션 처럼 문자열 보이게 하기 


안녕하세요.
고코더 입니다.

제 홈페이지에 묻고 답하기에
어떤 분이 제 블로그 스킨 상단에 타이핑
애니메이션에 대해 블로그 해드리겠습니다.


제 블로그 스킨을 수정할때
조금 다른 사람보다 튀고 싶어서??
해당 타이핑 애니메이션을 넣었습니다. 


어떤 사람은 오류라고 하기도 하고
멋지다고 하기도 하고 다양한 반응이긴 한데
필요한 분이 있다고 하니 남겨드리겠습니다

▼ TyperwritrJS  홈페이지 입니다.


▼ 홈페이지 예제만으로 충분하겠지만
제가 만든 소스를 바로 웹에서 확인해보세요
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<SPAN id="gocoder_typing">
 
</span>
 
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<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>
 
var typing = document.getElementById('gocoder_typing');
 
var typewriter = new Typewriter(typing, {
    loop: true
});
 
typewriter.typeString('GoCoder')
    .pauseFor(2500)
    .deleteAll()
    .typeString('IT Express')
    .pauseFor(2500)
    .deleteChars(7)
    .typeString('GoCoder.Net')
    .start();
</script>
cs

typeString() : 글자 입력
pauseFor() : 딜레이
deleteAll() : 글자 지우기
deleteChars(0) : 원하는 글자 만큼 지우기
예제 만으로도 충분히 이해 되설가 될거 같습니다.





마무리


기존에 있던 타이핑 버전이 낮아
업그레이드 후 올려 드립니다.


댓글