지나가던 개발자

[JavaScript] 타이핑 효과 만들기 본문

Developing/HTML, CSS, JavaScript

[JavaScript] 타이핑 효과 만들기

KwonYongHyeon 2021. 12. 5. 14:47

 뭔가 포트폴리오를 만들 때나, 기타 등등 모던한 웹을 만들기 위해서는 애니메이션이 꼭 필요하고, 그 중 타이핑 효과는 꽤 흔한 효과입니다.

 

 이번에 제가 그 효과를 CSS 없이 순수 자바스크립트로만 만들어 보았습니다. (고생을 사서 하는 타입)

 

 

 무슨 말을 넣을까 생각하다가, 곧 친구의 생일이기 때문에 "생일 축하해!"라는 메시지를 타이핑 효과로 표현해 보았습니다. 그 메시지 뒤에 깜빡거리는 커서도 넣었고요.

 

 아무튼 코드를 공개하겠습니다 :)

 

 index.html

 

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <p id="typing" style="float:left;"></p>
    <p id="blink" style="float: left;">|</p>
    <script src="typing.js"></script>
</body>

 

 typing.js

 

const typeSpace = document.getElementById('typing');
const cursur = document.getElementById('blink');
const typeList = ["ㅅ", "새", "생", "생ㅇ", "생이", "생일", "생일 ", "생일 ㅊ", "생일 추", "생일 축", "생일 축ㅎ", "생일 축하", "생일 축하ㅎ", "생일 축하해", "생일 축하해!", "생일 축하해!", "생일 축하해", "생일 축하", "생일 축", "생일 ", "생일", "생", "", ""];

let i = 0;
setInterval(function() {
    typeSpace.innerText = typeList[i];
    i += 1;
    if (i == typeList.length) {
        i = 0;
    }
}, 150);

setInterval(function() {
    if (cursur.innerText == '|') {
        cursur.innerText = '';
    } 
    else {
        cursur.innerText = '|';
    }
}, 700);

 

 자바스크립트에는 setInterval();이라는 함수가 있습니다. 일정한 시간 차를 두고 한 함수를 실행하는건데요. 평소에도 자주는 아니지만 종종 쓰는 함수였는데, 이번에 아주 유용하게 잘 썼습니다.

 

 typeList라는 리스트에 노가다라는 기술을 이용해서 출력할 메시지를 시간 순서대로 입력하고, setInterval();을 이용해 그를 0.15초 간격으로 순서대로 무한 출력해줍니다(i가 typeList의 길이와 같아지면 1로 돌아가니까 무한반복되는겁니다!). 

 

 그리고 뒤에 나오는 커서는 계속 깜빡깜빡하게 만약 커서에 |(커서 표시)가 출력되어 있으면 없애고, 없어지면 다시 커서 표시를 출력하는 것을 0.7초에 한번씩 하도록 만들어 주었습니다.

 

 

 이 상태는 디자인이 하나도 없는 상태라 실제 사용할때는 css도 좀 넣어서 폰트랑 바꾸고 해서 써야겠네요 :p

'Developing > HTML, CSS, JavaScript' 카테고리의 다른 글

[HTML, CSS, JavaScript] 오미쿠지(おみくじ) 사이트 만들기  (0) 2021.12.31
'Developing/HTML, CSS, JavaScript' Related Articles more
Comments