https://www.youtube.com/watch?v=e56H5n1SvEs
index.html--------------------
<!DOCTYPE html>
<html lang="ko">
<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>Typing Text</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrap">
<p id="dynamic" class="lg-text">
</p>
<p class="sm-text">
MIERO CODING
</p>
</div>
<script src="main.js"></script>
</body>
</html>style.css--------------------
*{margin: 0;padding: 0;box-sizing: border-box;}
body{background-color: darkslateblue;}
.wrap{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);color: white;text-align: center;}
.lg-text{font-size: 2rem;font-weight: bold;margin-bottom: 5px;}
.sm-text{font-size: 1.5rem;}
#dynamic{position: relative;display: inline-block;}
#dynamic::after{content: "";display: block;position: absolute;top: 0;right: -10px;width: 4px;height: 100%;background-color: white;}
#dynamic.active::after{display: none;}main.js--------------------
let target = document.querySelector("#dynamic");
function randomString(){
let stringArr = ["동해물과 백두산이 ", "마르고 달도록 ", "하느님이 보우하사 ", "우리 나라 만세!", "무궁화 삼천리 화려 강산", "대한 사람 대한으로 ", "길이 보전하세"]
let selectString = stringArr[Math.floor(Math.random() * stringArr.length)];
let selectStringArr = selectString.split("");
return selectStringArr;
}
// 타이핑 리셋
function resetTyping(){
target.textContent = "";
dynamic(randomString());
}
// 한글자씩 텍스트 출력 함수
function dynamic(randomArr){
if(randomArr.length > 0){
target.textContent += randomArr.shift();
setTimeout(function(){
dynamic(randomArr);
},80);
} else {
setTimeout(resetTyping, 3000);
}
}
dynamic(randomString());
// 커서 깜박임 효과
function blink(){
target.classList.toggle("active");
}
setInterval(blink, 500);https://www.youtube.com/watch?v=T4VE_6v9hFs&t=15s
main.js--------------------
const textArray = ["우리나라 대한민국","기영아 가자", "영희야 안녕!"];
const typingDelay = 200;
const erasingDelay = 100;
const newTextDelay = 2000;
let textArrayIndex = 0;
let charIndex = 0;
let text = document.querySelector("#dynamic");
// // 한글자씩 텍스트 출력 함수
function type() {
if(charIndex < textArray[textArrayIndex].length){
text.textContent += textArray[textArrayIndex].charAt(charIndex);
charIndex++;
setTimeout(type, typingDelay);
} else {
setTimeout(erase, typingDelay);
}
}
setTimeout(type, typingDelay+250);
function erase() {
if(charIndex >0){
// text.textContent = textArray[textArrayIndex].substring(0,charIndex-1);
// charIndex--;
text.textContent = "";
charIndex =0;
setTimeout(erase, erasingDelay);
} else {
textArrayIndex++;
if(textArrayIndex>=textArray.length) textArrayIndex=0;
setTimeout(type, typingDelay);
}
}
// 커서 깜박임 효과
function blink(){
text.classList.toggle("active");
}
setInterval(blink, 500);
'컴퓨터 > Javascript' 카테고리의 다른 글
| javascript 같은 class 이름 마다 버튼 넣기 (0) | 2023.02.11 |
|---|---|
| Javascript 코드깎는노인 (0) | 2022.02.03 |
| Javascript 드림코딩 by 엘리 (0) | 2022.01.25 |
| javascript 타이핑 효과 (0) | 2022.01.03 |
| jQuery (0) | 2021.12.23 |