자바스크립트로 글이 써지는 듯한 효과를 나타내고 싶을 때 쓰면 좋은 라이브러리가 있습니다.
바로 'Typed.js' 인데요.
사용방법은 어렵지 않습니다.
https://mattboldt.com/demos/typed-js/
JavaScript Animated Typing with Typed.js | by Matt Boldt
Another demo made with love by Matt Boldt. Installation # With NPM npm install typed.js # With Yarn yarn add typed.js # With Bower bower install typed.js Setup var typed = new Typed('.element', { strings: ["First sentence.", "Second sentence."], typeSpeed:
mattboldt.com
CDN
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>예제 소스
<html>
<body>
<div class="element"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
<script>
var options = {
strings: ['<i>First</i> sentence.', '& a second sentence.'],
typeSpeed: 40
};
var typed = new Typed('.element', options);
</script>
</html>이렇게 하면, strings에 있는 글자가 하나씩 타이핑 되는 효과를 볼 수 있습니다.
Upgrade된 예제 코드는 아래와 같아요
(커서 효과가 추가 되었습니다.)
<div> --> <span> 으로 변경된 것도 참조하세요.
커서 효과를 주려고 하니까 div는 제대로 되지 않고 span으로 해야 되더라구요^^;
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<span class="element"></span>
</body>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
<script>
var options = {
strings: ['First sentence.', '& a second sentence.', '테스트결과 만족 스러워요'],
typeSpeed: 40,
backSpeed: 100,
fadeOut: false,
smartBackspace: true,
cursorChar: '_',
loop: true
};
var typed = new Typed('.element', options);
</script>
</html>
마지막으로, 개발자의 요청사항을 만족시켜 줍시다.
'Typed.js' 사용 시 개발자에게 감사의 마음을 담아 사용함을 알려 주면 된다고 합니다.
Thanks for checking this out. If you have any questions, I'll be on Twitter.
If you're using this, let me know! I'd love to see it.
It would also be great if you mentioned me or my website somewhere. www.mattboldt.com
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| [10. 코드 난독화 & 암호화] 코딩을 하다 문득 암호화를 해야 하는... (0) | 2020.08.28 |
|---|---|
| [9. Chart.js] JAVASCRIPT 차트 라이브러리 (0) | 2020.05.12 |
| [7. 동적테이블 만들기] Javascript로 동적테이블(Dynamic Table) 만들기 (0) | 2020.05.01 |
| [6. 프로젝트 맛보기 완성!] 데이트 사이트 제작 프로젝트 맛보기 완성 (0) | 2019.10.27 |
| [5. 프로젝트 맛보기] 데이트 사이트 제작 프로젝트 (0) | 2019.10.22 |