반응형
1. Html + CSS 꾸미기
타이핑 효과를 주기 전에 먼저 원하는 폰트와 원하는 text를 화면에 배치합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<!-- font : Roboto -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap" rel="stylesheet">
<title>Typing Text</title>
</head>
<body>
<div class="container">
<h1>I'm Coding</h1>
</div>
</body>
</html>*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
.container{
height: 100%;
height: 100vh;
background: #32a89b;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.container h1{
font-size: 80px;
}
이렇게 나오면 성공!
2. Typed JS를 설치
https://github.com/mattboldt/typed.js/
GitHub - mattboldt/typed.js: A JavaScript Typing Animation Library
A JavaScript Typing Animation Library. Contribute to mattboldt/typed.js development by creating an account on GitHub.
github.com
(아래 글들을 보면서 따라가도 되고 링크를 타고 더 자세하게 보셔도 됩니다)
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>body에 위의 CDN을 추가합니다
3. script 추가
<script>
const typed = new Typed(".auto-type", {
string: ["Coding", "Sleeping", "Eating"],
typeSpeed: 150,
backSpeed: 150,
loop: true
})
</script>위에 있는 기본 틀로도 충분히 멋지게 만들 수 있지만 좀 더 자세한 설정을 하고 싶다면 링크를 참고해주세요
이제 이 script를 적용할 수 있도록 html만 수정해주면 됩니다!
4. 원하는 곳에 설정해주기
<body>
<div class="container">
<h1>I'm <span class="auto-type"></span> </h1>
</div>
</body>원하는 곳에 span태그로 감싸줍니다. 그러면 간단하게 타이핑 효과를 나타낼 수 있습니다!
최종 html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<!-- font : Roboto -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap" rel="stylesheet">
<title>Typing Text</title>
</head>
<body>
<div class="container">
<h1>I'm <span class="auto-type"></span> </h1>
</div>
<script>
const typed = new Typed(".auto-type", {
string: ["Coding", "Sleeping", "Eating"],
typeSpeed: 150,
backSpeed: 150,
loop: true
})
</script>
</body>
</html>반응형
'front-end 공부하기 > Javascript' 카테고리의 다른 글
| [Javascript] checkbox is checked / 체크 여부 확인 / 스크롤 막기 (0) | 2022.09.27 |
|---|
댓글