[JS 활용]한글, 타이핑 효과 주기

 

 
타이핑 효과는 여러 모로 쓰임이 많습니다~
이전에 찾은 오픈 소스를 찾아 활용했는데,
기존 오픈소스에는 뒤에 깜빡임 커서가 없어서 추가 해주었어요! 
 
 

Html

<div id="target">반짝이는 하루, 그게 오늘이야.</div>


<!--오픈소스 경로-->
<script src="https://unpkg.com/hangul-js"></script>
<script src="https://unpkg.com/type-hangul@latest/dist/type-hangul.min.js"></script>
<!--오픈소스 경로 끝-->

<!--속도제어-->
<script>
    TypeHangul.type('#target',{
    intervalType: 80
});
</script>

intervalType:80 , 숫자가 높을수록 타이핑 속도가 빨라짐 
 

Css 

@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo&display=swap');

body{
 background-image:url(https://images.unsplash.com/photo-1567653418876-5bb0e566e1c2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80);
 background-size:cover;
 background-repeat:no-repeat;
 background-position: 0 center;
 width: 100%;
 height: 500px;
}
#target { 
 font-family: 'Nanum Myeongjo', serif;
 color:#005ea8;
 text-align: center;
 font-weight: bold;
 font-size: 20px;
 margin-top: 150px;
}
#target::after {
  content: "|";
  right: 0;
  color:#005ea8;
  animation: caret .8s infinite;
}


@keyframes caret {
  50% {
    opacity:0;
  }
}

 

결과 

 

 
소스 정보 페이지 
https://lionbum.tistory.com/136