타이핑 효과를 주는 라이브러리를
소개합니다.
실무에서 텍스트에 타이핑하는 디자인 효과를 주고 싶을 때가 있습니다.
보통 css로 효과를 주기 하는데 부자연스러운 편입니다. css 대신 라이브러리를 이용하면 보다 간편한 소스로 자연스러운 타이핑 효과를 나타낼 수 있습니다.
타이핑 효과 사이트
https://libraries.io/npm/typewriter-effect
typewriter-effect on NPM
[](https://circleci.com/gh/tameemsafi/typewriterjs)
libraries.io
설치 방법
cdn
<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
NPM
npm install typewriter-effect@2.17.0
사용 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title> Test page</title>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#main {
background-color: black;
color: #fff;
font-size: 80px;
height: 100%;
text-align: center;
padding: 5%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/typewriter-effect@2.3.1/dist/core.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var text = document.getElementById("typeStyle");
var typewriter = new Typewriter(text, {
loop: true
});
typewriter.typeString('Welcome to Godino world')
.pauseFor(2000)
.deleteAll()
.typeString('타입 라이터 효과')
.pauseFor(2000)
.deleteChars(2)
.typeString('<strong>Effect!</strong>')
.pauseFor(2500)
.start();
});
</script>
</head>
<body>
<div id="main">
<div id="typeStyle"></div>
</div>
</body>
</html>
화면 결과(Result 클릭)
반응형
'💻CODING > javascript' 카테고리의 다른 글
| [js] 자바스크립트스와이퍼 슬라이드 라이브러리, swiper.js 사용법 (0) | 2021.06.02 |
|---|---|
| [js] 자바스크립트 애니메이션 라이브러리, gsap 사용법 (0) | 2021.05.31 |
| [js] react로 구구단 게임 만들기(ft. 클래스 방식, cdn 설치) (0) | 2021.03.14 |
| [js] 카드 공격 게임 완성 (ft. 자바스크립트로 자스스톤 게임 구현 ver.4) (0) | 2021.03.12 |
| [js] 카드세팅 리팩토링 딕셔너리 구조 (ft. 자바스크립트로 자스스톤 게임 구현 ver.3) (0) | 2021.03.02 |
댓글