JS) 타이핑하며 나오는 텍스트효과

안녕하세요 찐망고입니다.

제가 벌써 나흘째 포스팅을 꾸준히 하고 있어요..

예약포스팅이긴 하지만..

오늘이 마지막이긴 하지만..

 

오늘은 자바스크립트를 이용하여 페이지가 로드 되었을 때 

타이핑 하며 나오는 텍스트를 만들어 볼거에요..

 

일단 일반 타이핑 예제랑은 다르게

텍스트가 위쪽은 테두리만... 아래쪽은 면색이 포함되어서

요소가 두개로 분리되어야 하는 상황 

학생 포트폴리오 - OB리뉴얼 사이트

// HTML

<div class="text-box">
	<span class="text"></span>
</div>

// CSS

.text-box {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 200px;
}

.text-box > span {
    display: block;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 0.5px #fff;
    text-align: center;
    font-size: 5.6rem;
    font-weight: 800;
    line-height: 1.2;
}

#text-bg {
    -webkit-text-fill-color: #fff;
}

// JS

const text1 = "우리는 더 크게 환호할 미래를 위해서";
const text2 = "더 큰 꿈을 꿉니다";
const text = document.querySelector(".text");
// i변수는 현재 문자열을 타이핑 할 때 사용될 인덱스 값으로 초기화
let i = 0;

// setInterval함수로 100ms마다 호출 
function typing() {
    if (i < text1.length) {
    	// i인덱스에 해당하는 문자를 가져옴
        let txt = text1.charAt(i);
        text.innerHTML += txt;
    } else if (i === text1.length) {
        text.innerHTML += "<br>";
        text.innerHTML += "<span id='text-bg'></span>";
    } else if (i - text1.length <= text2.length) {
    	/
        let txt = text2.charAt(i - text1.length);
        document.getElementById("text-bg").innerHTML += txt;
    }
    i += 1;

    if (i > text1.length + text2.length) {
        clearInterval(intervalId);
    }
}

const intervalId = setInterval(typing, 100);

 

charAt()

 -  JavaScript 문자열에서 특정 인덱스에 해당하는 문자를 반환하는 메서드

 - 문자열의 각 문자는 0부터 시작하고, chatAt메서드를 사용하여 해당 인덱스에 있는 문자를 가져옴

 

See the Pen 타이핑하는 텍스트 by 찐망고 (@nnwbliyz-the-styleful) on CodePen.