자바스크립트-한 글자씩 타이핑 되게 하기

 

 

여러줄에 걸쳐서 타이핑 되는 효과??

<span class="typo" 
     data-typo1="타이핑 될"  
     data-typo2="문구를 "
     data-typo3="data로 " 
     data-typo4="넘겨줌">
</span>

		let intro = document.querySelector('.typo');
		let typo1 = intro.getAttribute('data-typo1');
		let typo2 = intro.getAttribute('data-typo2');
		let typo3 = intro.getAttribute('data-typo3');
		let typo4 = intro.getAttribute('data-typo4');
		let typoArr =[typo1,typo2,typo3,typo4];
		let Sindex = 0;
		let ArrIndex=0; 
			
	 	setTimeout(function(){
			setInterval(function(){
				if(ArrIndex < typoArr.length){
					if(Sindex<typoArr[ArrIndex].length){
						intro.style.borderRightWidth=2+'px';
						intro.innerHTML+= typoArr[ArrIndex].charAt(Sindex);
						Sindex++;
					}
					else if(Sindex==typoArr[ArrIndex].length){
						intro.innerHTML="";
						intro.style.borderRightWidth=0+'px';
						Sindex=0;
						ArrIndex++;	
					}
				}		
			},300); 		
		},100);

.charAt()메소드는 주어진 문자열을 반환한다.

배열처럼 인덱스 0에서 부터 시작, 마지막 인덱스는 string.length-1로 찾을 수 있다.