티스토리 뷰
안녕하세요!
곧 자려고 하는데, 잠들기 전에 가볍게 자바스크립트 타이핑 효과 구현하는 방법 포스팅해봅니다. 비어있는 h1 태그를 만들고, 거기에 글자가 써지는 효과를 구현해 보았습니다. 좀 더 실감나는 효과를 만들기 위해 CSS로 간단한 애니메이션 효과도 적용해봤습니다. 코드는 index.html / style.css / script.js 세 파일로 구성되어 있습니다.
index.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1 class="text"></h1>
<script src="script.js"></script>
</body>
</html>
|
웹문서에 필요한 기본적인 구조에 CSS파일(style.css)과 JS파일(script.js)을 추가해주었습니다.
표시되는 태그는 h1 하나 뿐인데, 이마저도 아무것도 쓰여있지 않습니다. 스크립트 및 스타일시트 적용을 위해 class를 "text"로 지정하였습니다.
script.js
|
1
2
3
4
5
6
7
8
9
10
11
12
|
const content = "Typing Effect"
const text = document.querySelector(".text")
let index = 0;
function typing(){
text.textContent += content[index++]
if(index > content.length){
text.textContent = ""
index = 0;
}
}
setInterval(typing, 500)
|
Line 1 : 타이핑 효과를 통해 표시하고자 하는 텍스트는 "Typing Effect"로, content 변수에 대입하였습니다.
Line 2 : 타이핑 효과를 줄 태그를 선택해두었습니다.
Line 5 - 11 :
typing 함수는 index 를 1씩 증가시키면서 content 텍스트의 내용을 하나씩 덧붙여가며 <h1 class="text"> 태그에 표시하는 기능을 수행합니다. 이 함수를 호출할 때마다 표시되는 문자는 하나씩 증가합니다. 그러다 index 가 텍스트(content 문자열)의 길이보다 길어지게 되면, 처음부터 다시 표시를 시작할 수 있도록 관련 값들을 리셋합니다.
Line 12 : typing 함수가 주기적으로 계속 실행되도록 500ms 마다 호출합니다.
style.css
|
1
2
3
4
5
6
7
8
9
10
11
12
|
@keyframes cursor{
50%{ border-color: transparent; }
}
.text{
display: table-cell;
vertical-align: middle;
font-size: 32px;
height: 32px;
border-right: .05em solid black;
animation: cursor 0.5s ease infinite;
}
|
cursor 애니메이션은 타이핑 효과로 인해 텍스트가 추가될 때마다 마치 옆에서 커서가 깜빡거리는 것처럼 보이게 하기 위해 만든 애니메이션입니다. 이를 0.5초마다 동작하도록 해주면(Line 11) 문자의 추가와 커서의 깜빡임이 함께 동작하게 됩니다.
Line 6과 7에서는 텍스트 태그 h1의 display를 table-cell로 처리하고 수직 가운데 정렬을 해주었는데, 이를 하지 않고 h1 태그에 cursor 애니메이션을 적용하면 블록 태그 특성상 커서가 화면의 오른쪽 끝에서 깜빡이게 됩니다.
여기까지, 가능한 간단하게 작성해 본 웹문서 타이핑 효과 코드를 소개해보았습니다. 마지막으로 결과 화면 캡쳐를 보이면서 마무리하도록 하겠습니다.
끝. 좋은 밤 되세요~~ 낮에 보셨다면 좋은 하루 되세요~~!
'IT > 프로그래밍' 카테고리의 다른 글
| 자바스크립트 모바일 터치 슬라이더 구현하기 (feat. 터치 이벤트) (0) | 2021.02.27 |
|---|---|
| 자바스크립트 이미지 슬라이드 구현하기 (0) | 2021.02.24 |
| WOW.js 사용법 : 스크롤 애니메이션 라이브러리 (1) | 2021.02.11 |
| [Javascript] 로또번호 추첨하기 (0) | 2020.12.28 |
| 윈도우즈 포트 죽이기 명령어 : kill port on windows system (2) | 2020.12.17 |