[스크립트] 한글 타이핑하듯 보여주는 JS

아래 소스로 모든것을 보여준다.

<style> 
 body{ font-family:Tahoma,굴림; font-size:9pt; } 
</style> 
<span name="textOutput" id="textOutput" style="display:none">안녕하세요.아이유쨔응..;;배고픈데 밥먹으러 갑시다!!ㅎ</span> 
<script language="javascript"> 
tmp_su1 = ""; 
tmp_su2 = ""; 
tmp_su3 = ""; 
ts = "1"; 
tss = "0"; 
chks = "0"; 
str_msg=""; 

msg=document.getElementsByName('textOutput')[0].innerHTML; 

function hangeul(su,string){ 
string = msg.substring(tss,ts); 
 font_cho = Array('ㄱ', 'ㄲ', 'ㄴ', 'ㄷ', 'ㄸ', 'ㄹ', 'ㅁ', 'ㅂ', 'ㅃ', 'ㅅ', 'ㅆ', 'ㅇ', 'ㅈ', 'ㅉ', 'ㅊ', 'ㅋ','ㅌ', 'ㅍ', 'ㅎ' ); 
 font_jung = Array('ㅏ', 'ㅐ', 'ㅑ', 'ㅒ', 'ㅓ', 'ㅔ', 'ㅕ', 'ㅖ','ㅗ', 'ㅘ', 'ㅙ', 'ㅚ', 'ㅛ', 'ㅜ', 'ㅝ', 'ㅞ','ㅟ', 'ㅠ', 'ㅡ', 'ㅢ', 'ㅣ'); 
 font_jong = Array('  ', 'ㄱ', 'ㄲ', 'ㄳ', 'ㄴ', 'ㄵ', 'ㄶ', 'ㄷ','ㄹ', 'ㄺ', 'ㄻ', 'ㄼ', 'ㄽ', 'ㄾ', 'ㄿ', 'ㅀ','ㅁ', 'ㅂ', 'ㅄ', 'ㅅ', 'ㅆ', 'ㅇ', 'ㅈ', 'ㅊ','ㅋ', 'ㅌ', 'ㅍ', 'ㅎ' ); 
 msg_replace = Array('44','16','72','100','128' ); 
 CompleteCode = string.charCodeAt(0); 
 UniCode = CompleteCode - 0xAC00; 
 Jong = UniCode % 28; 
 Jung = ( ( UniCode - Jong ) / 28 ) % 21; 
 Cho = parseInt (( ( UniCode - Jong ) / 28 ) / 21); 
if(!font_cho[Cho]){ 
  Cho_tmp = ' '; 
} else { 
  Cho_tmp = font_cho[Cho]; 
} 

 Hangul1 = Cho_tmp.charCodeAt(0); 
 Hangul2 = 0xAC00 + Cho * 21 * 28 + Jung * 28; 
 Hangul3 = CompleteCode; 

for(i = 0; i < msg_replace.length; i++){ 
 if(msg_replace[i] == Hangul2){ 
    Hangul2 = ' '; 
 } 
} 
 tmp_su1 = Hangul1; tmp_su2 = Hangul2; tmp_su3 = Hangul3; str_msg = msg.substring(0,tss); 
if(su == '1'){ 
document.all.korea1.innerHTML = str_msg+String.fromCharCode(Hangul1); 
} else if(su == '2'){ 
document.all.korea1.innerHTML = str_msg+String.fromCharCode(Hangul2); 
} else if(su == '3'){ 
document.all.korea1.innerHTML = str_msg+String.fromCharCode(Hangul3); 
if(ts == msg.length){ 
ts = "0"; 
tss = "-1"; 
} 
ts++; 
tss++; 
} 
} 
timmer = ""; 
function start(){timmer++;if(timmer == '2'){hangeul('1');} else if(timmer == '4'){hangeul('2');} else if(timmer == '6'){hangeul('3');timmer = "";}} 
</script> 
<span id="korea1" style="width:100%; height:10%;"></span></BR> 
<script> setInterval("start();", 50); </script>

 

이외에도 공개된 오프소스들이 많지만 자체적으로 해결하기엔 무난하다.

https://github.com/SDuck4/type-hangul

GitHub - SDuck4/type-hangul: ⌨️ 한글 타이핑 효과 라이브러리

https://github.com/keisokoo/hangul-typing-animation

GitHub - keisokoo/hangul-typing-animation: It is a library that can be used to create a typing animation(for Korean).