728x90
반응형
[javascript/jQuery] - [JAVASCRIPT/JQUERY] 글자 타이핑 효과
[CSS/CSS 응용] - [CSS]animate steps를 이용해 타이핑 효과 내기
지금까지 올렸던 타이핑 효과는 한글자씩 추가되는 효과..
이번것은 초성중성종성 모두 나눠서 추가하도록 만든 효과..
초성 중성 종성 나누는 코드는 아래 링크에서 참고함
https://westzero.tistory.com/112
나눠진 초성 중성 종성을 다시 합치는 건 아래 링크 참고
http://develop.sunshiny.co.kr/876
두가지를 참고해 구현한 타이핑 효과는 아래와 같다.
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);
}
}
728x90
반응형
'javascript > javascript' 카테고리의 다른 글
[javascript] 계산기를 손쉽게 구현할 수 있는 함수 eval() (413) | 2019.07.23 |
---|---|
[javascript]소수점 반올림해서 n번째자리까지 출력하는 toFixed (0) | 2019.07.01 |
[자바스크립트 플러그인]그리드 관련 플러그인 Muuri (0) | 2019.06.18 |
[자바스크립트 플러그인]쉽고 간단하게 스크롤 애니메이션 등록하기 WOW.js (0) | 2019.06.17 |
[javascript]체크박스(input[type="checkbox"]) 제어하기 (0) | 2019.06.14 |
댓글