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

---

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

---

안녕하세요.

고코더 입니다.

제 홈페이지에 묻고 답하기에

어떤 분이 제 블로그 스킨 상단에 타이핑

애니메이션에 대해 블로그 해드리겠습니다.

http://gocoder.net/qna/943

제 블로그 스킨을 수정할때

조금 다른 사람보다 튀고 싶어서??

해당 타이핑 애니메이션을 넣었습니다. 

어떤 사람은 오류라고 하기도 하고

멋지다고 하기도 하고 다양한 반응이긴 한데

필요한 분이 있다고 하니 남겨드리겠습니다

▼ TyperwritrJS  홈페이지 입니다.

https://safi.me.uk/typewriterjs/

▼ 홈페이지 예제만으로 충분하겠지만

제가 만든 소스를 바로 웹에서 확인해보세요

gocoder_typer.html

<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>

typeString() : 글자 입력

pauseFor() : 딜레이

deleteAll() : 글자 지우기

deleteChars(0) : 원하는 글자 만큼 지우기

예제 만으로도 충분히 이해 되설가 될거 같습니다.

---

자바스크립트 플러그인 추천 글

---

jQuery - 색상코드 선택 플러그인 / Color Picker

jQuery - 선택 요소 사이즈 재조정 / resizeble()

jQuery - lazyload() 이미지 동적으로 / 스크롤시 호출

jQuery | Plugin - select 박스 검색 가능하게

jQuery - 바코드(barcode) 만들기

---

마무리

---

기존에 있던 타이핑 버전이 낮아

업그레이드 후 올려 드립니다.