자바스크립트 타이핑 효과 구현하기
https://www.youtube.com/watch?v=H1723LKnthk
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="typing.css">
</head>
<body>
<h1 class="text"></h1>
<script src="typing.js"></script>
</body>
</html>css
.text{display: table-cell;vertical-align: middle;border-right: .05em solid black;animation: cursor 0.5s ease infinite;}
@keyframes cursor{
50%{border-color: transparent;}
}js
const content = "주식회사 밀앤아이"
const text = document.querySelector(".text")
let index = 0;
function typing(){
text.textContent += content[index++];
if(index>content.length){
text.textContent=""
index=0;
}
}
setInterval(typing,500)초성 중성 종성 모두 분리해서 정말 타이핑 느낌처럼 나게 하는 타이핑으로
중간에 엔터를 치는듯하게 여러줄로 하는방법
https://gahyun-web-diary.tistory.com/2
[JAVASCRIPT/JQUERY] 글자 타이핑 효과
CSS animation을 이용해 커서가 깜빡거리는 효과를 구현 animation-duration: 0.3s; animation-iteration-count: infinite; 0.3초동안 애니메이션이 실행되고 infinite 무한으로 반복하기 @keyframes cursor{ 0%{..
gahyun-web-diary.tistory.com
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="typing.css">
</head>
<body>
<p class="result1" style="font-size: 20px;"></p>
<br>
<p class="result2" style="font-size: 20px;"></p>
<script src="typing.js"></script>
</body>
</html>css
p.result1,p.result2{ display: inline-block; font-size:30px; height:24px; line-height: 24px; border-right: 1px solid #fff; padding-right: 2px; box-sizing: border-box; padding:0; margin:5px; }
p.cursor {animation: cursor 0.4s infinite;}
@keyframes cursor{
0%{border-right: 1px solid #fff}
50%{border-right: 1px solid #000}
100%{border-right: 1px solid #fff}
}js
// 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 result1 = "주식회사 밀앤아이";
var result2 = "주식회사 헴펠";
var typeing1=[], typeing2=[];;
result1 = result1.split(''); // 한글자씩자름
result2 = result2.split(''); // 한글자씩자름
//각글자 초성,중성,종성으로 나눔
for(var i =0; i<result1.length; i++){
typeing1[i]=result1[i].toKorChars();
}
for(var i =0; i<result2.length; i++){
typeing2[i]=result2[i].toKorChars();
}
//출력할 엘리먼트요소 가져옴
var resultDiv1 = document.getElementsByClassName("result1")[0];
var resultDiv2 = document.getElementsByClassName("result2")[0];
//
var text = "";
var i=0;
var j=0;
//총글자수
var imax1 = typeing1.length;
var imax2 = typeing2.length;
//setInterval을 이용해 반복적으로 출력
var inter = setInterval(typi,150);
var inter2;
function typi(){
//글자수만큼 반복후 종료
resultDiv1.classList.add("cursor");
if(i<=imax1-1){
//각 글자가 초성 중성 종성 순서대로 추가되도록
var jmax1 = typeing1[i].length;
resultDiv1.innerHTML = text + typeing1[i][j];
j++;
if(j==jmax1){
text+= typeing1[i][j-1];//초성중성종성 순서대로 출력된 글자는 저장 ( 다음 글자와 이어붙이기 위해서 )
i++;
j=0;
}
} else{
clearInterval(inter);
text ="";
i=0;
j=0;
setTimeout(function(){
resultDiv1.classList.remove("cursor");
setTimeout(function(){
resultDiv2.classList.add("cursor");
setTimeout(function(){
inter2 = setInterval(typi2,150);
},400);
},300);
},400);
}
}
function typi2(){
//글자수만큼 반복후 종료
if(i<=imax2-1){
//각 글자가 초성 중성 종성 순서대로 추가되도록
var jmax2 = typeing2[i].length;
resultDiv2.innerHTML = text + typeing2[i][j];
j++;
if(j==jmax2){
text+= typeing2[i][j-1];//초성중성종성 순서대로 출력된 글자는 저장 ( 다음 글자와 이어붙이기 위해서 )
i++;
j=0;
}
} else{
clearInterval(inter);
}
}'컴퓨터 > Javascript' 카테고리의 다른 글
| Javascript 코드깎는노인 (0) | 2022.02.03 |
|---|---|
| Javascript 드림코딩 by 엘리 (0) | 2022.01.25 |
| jQuery (0) | 2021.12.23 |
| javascript 그림슬라이드 (0) | 2021.12.21 |
| Javascript Rock's Easyweb (0) | 2021.12.15 |