728x90
반응형
[JavaScript] 자바스크립와 CSS로 글자 입력효과 내는 방법 !!
입력한 글이 써지는 듯한 효과를 주는 코드 입니다 ㅎ
예제코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
#textBox{
width: 200px;
height: 100px;
background: #5769ce;
padding: 30px;
border-radius: 10px;
}
.text{
font-weight: bold;
color: white;
}
.blink {
animation: blink 0.5s infinite;
}
@keyframes blink {
to {
opacity: 0;
}
}
</style>
</head>
<body>
<div id="textBox">
<span class="text"></span><span class="blink">|</span>
</div>
</body>
</html>
<script>
const content = "안녕하세요.\n포스트it 입니다.\n다들 즐거운 코딩 되세요 😀💻";
const text = document.querySelector(".text");
text.textContent = "";
let txtIdx = 0;
function typing(){
let txt = content[txtIdx++];
if (txt == undefined) return;
text.innerHTML += txt=== "\n" ? "<br/>": txt;
if (txtIdx > content.length) {
txtIdx = 0;
}else{
setTimeout(typing, 100)
}
}
typing();
</script>결과값
|
728x90
반응형
'Coding > JavaScript' 카테고리의 다른 글
| [JavaScript] 글자 타이핑 하는 효과 내는 방법 !! (Typed.js 라이브러리 활용) (0) | 2023.08.05 |
|---|---|
| [JavaScript] 자바스크립를 활용하여 input 태그안에 value 넣는 방법 !! (0) | 2023.07.11 |
| [JavaScript & jQuery] 움직임, 입력이 없을 시 자동 새로고침&경로이동 하는 방법 !! (0) | 2023.06.17 |
| [JavaScript] 자바스크립트로 input창 엔터로 적용하는 방법 !! (0) | 2023.06.10 |
| [JavaScript & jQuery] 제이쿼리 사용하여 input 텍스트 박스 placeholder 변경하는 방법 !! (0) | 2023.06.09 |
댓글