[javascript]초성 중성 종성(자음/모음)모두 나눠 하나씩 타이핑 하는 효과

[javascript/jQuery] - [JAVASCRIPT/JQUERY] 글자 타이핑 효과

[CSS/CSS 응용] - [CSS]animate steps를 이용해 타이핑 효과 내기

 

 

 

지금까지 올렸던 타이핑 효과는 한글자씩 추가되는 효과..

이번것은 초성중성종성 모두 나눠서 추가하도록 만든 효과.. 

 

 

초성 중성 종성 나누는 코드는 아래 링크에서 참고함 

 

https://westzero.tistory.com/112

JavaScript로 한글 초성/중성/종성 분리하기

 

 

나눠진 초성 중성 종성을 다시 합치는 건 아래 링크 참고 

http://develop.sunshiny.co.kr/876

한글 초성, 중성, 종성의 합성 :: You've got to find what you love.

 

 

두가지를 참고해 구현한 타이핑 효과는 아래와 같다.

 

result 변수에 타이핑 되길 원하는 문장만 바꿔주면 그대로 사용가능하다. 

 

 

 

 

 

 // https://westzero.tistory.com/112
 //초성중성종성을 나누는 함수 
    String.prototype.toKorChars = function() { 
        var cCho = [ 'ㄱ', 'ㄲ', 'ㄴ', 'ㄷ', 'ㄸ', 'ㄹ', 'ㅁ', 'ㅂ', 'ㅃ', 'ㅅ', 'ㅆ', 'ㅇ', 'ㅈ', 'ㅉ', 'ㅊ', 'ㅋ', 'ㅌ', 'ㅍ', 'ㅎ' ], 
        cJung = [ 'ㅏ', 'ㅐ', 'ㅑ', 'ㅒ', 'ㅓ', 'ㅔ', 'ㅕ', 'ㅖ', 'ㅗ', 'ㅘ', 'ㅙ', 'ㅚ', 'ㅛ', 'ㅜ', 'ㅝ', 'ㅞ', 'ㅟ', 'ㅠ', 'ㅡ', 'ㅢ', 'ㅣ' ], 
        cJong = [ '', 'ㄱ', 'ㄲ', 'ㄳ', 'ㄴ', 'ㄵ', 'ㄶ', 'ㄷ', 'ㄹ', 'ㄺ', 'ㄻ', 'ㄼ', 'ㄽ', 'ㄾ', 'ㄿ', 'ㅀ', 'ㅁ', 'ㅂ', 'ㅄ', 'ㅅ', 'ㅆ', 'ㅇ', 'ㅈ', 'ㅊ', 'ㅋ', 'ㅌ', 'ㅍ', 'ㅎ' ], cho, jung, jong; 
        var str = this, 
        cnt = str.length, 
        chars = [], 
        cCode; 
        for (var i = 0; i < cnt; i++) { 
            cCode = str.charCodeAt(i); 
            if (cCode == 32) { 
              chars.push(" ");
              continue;
            } // 한글이 아닌 경우 
            if (cCode < 0xAC00 || cCode > 0xD7A3) { 
                chars.push(str.charAt(i)); continue; 
                } 
            cCode = str.charCodeAt(i) - 0xAC00; 

            jong = cCode % 28; 
            // 종성 
            jung = ((cCode - jong) / 28 ) % 21 

            // 중성 
            cho = (((cCode - jong) / 28 ) - jung ) / 21 
            // 초성 

            //기본 코드 테스트가 ㅌㅔㅅ-ㅌ- 형식으로 저장됨 
            // chars.push(cCho[cho], cJung[jung]); 
            // if (cJong[jong] !== '') { 
            //     chars.push(cJong[jong]); 
            //     } 

			// 이부분을 원하는 방향으로 바꿈.
            // 테스트라는 문장이 
            // ㅌ,ㅔ,ㅅ,-,ㅌ,- 형식으로 저장되던 코드를 
            // ㅌ,테,ㅅ,스,ㅌ,트 형식으로 저장되도록함 (타이핑효과를 위해서)
            chars.push(cCho[cho]);
            chars.push(String.fromCharCode( 44032 + (cho * 588) + (jung  * 28)));
            if (cJong[jong] !== '') { 
                chars.push(String.fromCharCode( 44032 + (cho * 588) + (jung  * 28) + jong ));
            }
           
        } 
        
        return chars; 
    }


//타이핑할 문장
    var result  = "간단타이핑 테스트 문장";
    var typeing1=[];
    result = result.split(''); // 한글자씩자름

    //각글자 초성,중성,종성으로 나눠서 배열로 저장함.
    for(var i =0; i<result.length; i++){
        typeing1[i]=result[i].toKorChars();
    }

    //출력할 엘리먼트요소 가져옴 -result클래스에 출력
    var resultDiv = document.getElementsByClassName("result")[0];

 
    var text = "";
    var i=0; 
    var j=0; 
    var text = '';

    //총글자수
    var imax = typeing1.length;

    //setInterval을 이용해 반복적으로 출력 
    var inter = setInterval(typi,150);


    function typi(){
        //글자수만큼 반복후 종료 
        if(i<=imax-1){
            //각 글자가 초성 중성 종성 순서대로 추가되도록 
            var jmax = typeing1[i].length;
            resultDiv.innerHTML = text + typeing1[i][j];
            j++;
            if(j==jmax){
                text+=  typeing1[i][j-1];
                //초성중성종성 순서대로 출력된 후 글자는 저장 ( 다음 글자와 이어붙이기 위해서 )
               
                i++;
                j=0;
            }
        } else{
            clearInterval(inter);
        }
    }