1. html 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typing Text</title>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
<link href="./style.css" rel="stylesheet"
</head>
<body>
<div class="wrap">
<h1>
<span class="material-symbols-outlined">language </span>
</h1>
<p id="dynamic" class="lg-text">
</p>
<p class="sm-text">CHANYOUNG ㅣ 100 Subscribe</p>
</div>
<script src="script.js"></script>
</body>
</html>2. css 코드
*{
box-sizing: border-box;
margin:0;
padding:0;
}
body{
background-color: darkslateblue;
}
.wrap{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
color: white;
text-align: center;
}
.material-symbols-outlined{
font-size:10rem;
}
.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;
}3. js 코드
let target = document.querySelector("#dynamic");
let stringArr = ["Learn to HTML", "Learn to CSS", "Learn to JavaScript", "Learn to JAVA", "Learn to Spring"];
let selectString = stringArr[Math.floor(Math.random() * stringArr.length)];
let selectStringArr = selectString.split("");
// 한글자씩 텍스트 출력 함수
function dynamic(randomArr){
if(randomArr.length > 0){
target.textContent += randomArr.shift();
setTimeout(function(){
dynamic(randomArr);
},80);
}else{
setTimeout(resetTyping, 3000);
}
}
// 타이핑 리셋
function resetTyping(){
target.textContent = "";
dynamic(randomString());
}
function randomString(){
let stringArr = ["Learn to HTML", "Learn to CSS", "Learn to JavaScript", "Learn to JAVA", "Learn to Spring"];
let selectString = stringArr[Math.floor(Math.random() * stringArr.length)];
let selectStringArr = selectString.split("");
return selectStringArr;
}
// 커서 깜빡임 효과
function blink(){
target.classList.toggle("active");
}
setInterval(blink, 500);
dynamic(selectStringArr);4. 결과
블로그 이전했습니다 -> https://young-code.tistory.com