티스토리 뷰
728x90
반응형
html, css로 타이핑 효과, 커서 애니메이션 효과 주는 방법 입니다 !
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
#box{
width: 200px;
height: 100px;
background: #7459AE;
padding: 30px;
}
.text{
font-weight: bold;
color: white;
}
.blink {
animation: blink 0.5s infinite;
}
@keyframes blink {
to {
opacity: 0;
}
}
</style>
</head>
<body>
<div id="box">
<span class="text"></span><span class="blink">|</span>
</div>
<script>
const content = "안녕하세요. 반갑습니다. 돔돔이블로그에 오신 것을 환영합니다 ! 😍😍😍";
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>
</body>
</html>728x90
반응형
'프로그래밍 > Frontend' 카테고리의 다른 글
| [mapboxGL] 지도타일 도로명, 건물명 등 한국어로 변환하기 (0) | 2023.07.07 |
|---|---|
| VWORLD webGL 3D 지도 API 2.0 사용 - 1. 지도불러오기 (0) | 2023.06.02 |
| [MapboxGL] 지도에 국가공간정보포털 건물데이터 벡터형식으로 올리기 (0) | 2023.03.13 |
| 화면분할 코드(leaflet side-by-side.js)를 공공기관 지도에 활용하기 (feat. 스마트서울맵 SMAP, 통계청 SGIS) (0) | 2023.02.21 |
| [echarts.js] legend selector: Add function to deselect all legends (2) | 2023.02.03 |
댓글
