Text Effect

안녕하세요. 오늘은 한 글자 씩 나오는 글자 효과를 JS로 만들어 보겠습니다.

---

SETTING

<div id="title" class="title">
	<h1 class="hi">Hellow</h1>
</div>

.title {
	color: #000000;
    font-size: large;
    text-align: center;
}

.title > h1 {
	margin-top: 0;
    margin-bottom: 0;
}

span {
	opacity: 0;
    transition: all 1s ease;
}

span.fade {
	opacity: 1;
}

opacity: 0으로 인해 현재 화면은 아무것도 보이지 않는 화면이 생깁니다. 그렇다면 JS를 통해서 각각의 글자에 fade를 주면 opacity: 1로 인해 글자가 생깁니다. 그러면 글자를 하나 씩 생기게 하면 한 글자씩 생기는 효과가 생기겠네요.

---

JS

//hi 선택자를 잡을 상수 text 지정
const text = document.querySelector('.hi');

//text의 모든 내용을 가져올 textContent 프로퍼티 사용해 상수 strText 지정 
const strText = text.textContent;

//text 내용을 각각의 한 단어로 쪼갤 split 메서드 사용해 상수 splitText 지정
const splitText = strText.split('');

//text의 내용을 비움. 여기서 비우는 이유는 쪼개진 text를 하나씩 
//textContent에 추가해주기 위해서다.
text.textContent = "";

//반복문을 통해 각각의 쪼갠 text의 길이 만큼 반복문을 돌려줌
for(let i=0;i<splitText.length;i++){

	//element.innerHTML을 이용해 문자열 그대로 element에 넣어줌
    //반복문을 통해 각각의 쪼갠 text의 값을 가져옴 
    //ex) splitText[0] = H / splitText[1] = e ...
    text.innerHTML +="<span>" + splitText[i] + "</span>";
}


let char = 0;

//setInterval: 일정 시간을 두고 함수를 호출, 매개변수로 ('함수','일정간격시간')
let timer = setInterval(onTick,50);

//각각의 text의 span을 잡아 class="fade"를 넣어줄 함수 onTick
//element.classList: element의 클래스를 제어할 수 있다.
//element.classList.add(): element안에 명시할 클래스를 추가한다.
//element.classList.removw(): element안에 명시할 클래스를 제거한다.
function onTick() {
    const span = text.querySelectorAll('span')[char];
    span.classList.add('fade');
    char++
    if(char == splitText.length){
        complete();
        return;
    }
}

//setInterval을 만들어주면 중지를 시켜줘야된다.
//clearInterval()로 setInterval를 중지하는데 사용가능
//timer의 값을 null로 설정함으로 clearInterval(null)이 된다.
function complete() {
    clearInterval(timer);
    timer=null;
}

---

구현

---

포스팅을 마무리하겠습니다.