[Javascript] 글자 타이핑 연출

오늘 React를 공부하다가 갑자기 JS로 타이핑하는 연출을 만들고 싶어졌다! 그래서 바로 만들어 버렸다.

 

const target = document.getElementById("change");
const text = "Hello World";

target.innerText = "";

//sleep 함수
function sleep(t) {
    return new Promise(resolve => setTimeout(resolve, t));
}

(async function () {
    while (true) {
        for (var i = 0; i < text.length; i++) {
            target.innerText = text.slice(0, i + 1);
            await sleep(200);
        }
        await sleep(400);
        for (var i = text.length - 1; i >= 0; i--) {
            target.innerText = text.slice(0, i);
            await sleep(100);
        }
        await sleep(400);
    }
})();

 

h1 태그에 id를 입혀가지고 js에서 getElementById함수로 불러오게 한다. 그리고 for문으로 썼다 지우는 연출을 만든다.

그리고 시간 지연을 주기위해 sleep함수를 Promise로 만들어 줄것이다.

 

그래서 완성된게 이건데 너무 밋밋해 보였다.

 

타이핑 완성, 타이핑 시작부분에서 딜레이를 1초로 늘려주고,  CSS로 glow효과와 배경을 꾸며 줘봤다.

@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap');

body{
    background-image: url('https://images.pexels.com/photos/3075993/pexels-photo-3075993.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
    object-fit: cover;
    color: white;
    font-family: 'Black Han Sans', sans-serif
}

#change{
    margin-top: 150px;
    text-align: center;
    font-size: 80px;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.128), 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
}

 

사실 glow효과도 어디서 퍼온거다. 하지만 만들었다는 것에 의미를 두자...

결론적으로는 기능은 내가 만들었지만 이쁘게 꾸며준것은 외국인 분이시다.

 

내가 만든 프로그램중에 가장 예뻤던거 같고 다른 프로젝트를 할때도 쓸 거 같다. 매우 유용!

 

[소스코드] https://github.com/Function1790/TextTyping