[JAVASCRIPT/JQUERY] 글자 타이핑 효과

1. 초간단 타이핑 느낌내기

 

CSS animation을 이용해 커서가 깜빡거리는 효과를 구현

 

animation-duration: 0.3s; 
animation-iteration-count: infinite;

 

0.3초동안 애니메이션이 실행되고 infinite 무한으로 반복하기 

@keyframes cursor{ 
  0%{border-right: 1px solid #fff} 
  50%{border-right: 1px solid #000} 
  100%{border-right: 1px solid #fff} 
}

border-right가 커서가 깜빡이는 것 처럼 보인다. 

 

이때 border-right 대신 쓸수있는방법은 after를 이용해 width와 height 값을 주고 background 색깔을 지정해 opacity 로  깜빡거리는 효과를 줄 수도 있다. 

 

 

2. 한글자씩 잘라서 이어붙이기

 

jQuery 를 이용해서 문자열을 잘라 한글자씩 추가되도록 구현함. 

typingTxt=typingTxt.split(""); 

split 함수를 이용해 문자열을 한글자씩 잘라 배열로 만든다.

 

setInterval(typing,100);

setInterval을 통해 일정시간(100=0.1s) 마다  typing함수가 반복되도록 설정 

 

typing함수

한글자씩 잘라 배열로 만들어둔 typingTxt 배열을 이용해 한글자씩 append함수를 이용해서 이어붙인다. 

 

 

커서를 좀서 작게만들기 위해서는 line-height나 height값을 조절하여 typing박스의 높이를 조절하는 css를 적용하면된다. 

 

 

span태그를 인라인으로 .typing 뒤에 추가하거나 :after을 이용해 가상선택자로  커서를 따로 만들어도된다. 

 

 

 

 

typing_project.zip

0.00MB

 

위와 같이 자바스크립트를 이용하지않고 css 만으로 구현할수 있는 방법이 있으나, 뛰어서쓰기나 점(.)과같은 크기가 다른 부분에서 조금 어색해 질 수 있다. (CSS animation steps를 이용해 한칸씩 width값이 커지도록하는방법)

[CSS] - [CSS]animate steps를 이용해 타이핑 효과 내기

 

 

---

 

 

 

 

3. 타이핑하면서 특정글자에 색을 넣고싶은 경우 

 

 

 

 

if문을 이용해 원하는 글자는 span 태그를 이용해 글자 색을 지정해준다

 if(typingTxt[typingIdx]=='타'){
   var inText = "<span class='red'>"+typingTxt[typingIdx]+"</span>"
   $(".typing").append(inText); // 한글자씩 이어준다. 
 }else{
   $(".typing").append(typingTxt[typingIdx]); // 한글자씩 이어준다. 
}

 

4. 여러문장이 순서대로 타이핑되는 경우

 

 

 

 

 

--파일첨부(여러문장 순서대로 타이핑)

typing_li.zip

0.03MB

 

 

5. 여러문장이 지워지지않고 타이핑되는 경우

 

 

 

 

typing_multi.zip

0.03MB

 

 

6. 여러줄의 문장이 써지는 타이핑을 반복하는 경우

 

 

 

 

7. 여러문장이 타이핑된 후 특정 문장만 반복적으로 지워졌다 다시 써지는 효과

한글자씩 지워지는 효과 

 

 

 

 

 

8. 특정 단어만 반복 타이핑되고 지워지는 효과

 

 

 

 

9. 전체 문장 타이핑 되면서 특정 단어 반복 타이핑 & 지워지기 

 

 

 

 

10. 초성 중성 종성까지 모두 분리해서 타이핑하는 효과

[javascript/javascript] - [javascript]초성 중성 종성(자음/모음)모두 나눠 하나씩 타이핑 하는 효과

 

 

 

 

초성 중성 종성 모두 분리해서 정말 타이핑 느낌처럼 나게 하는 타이핑으로 

중간에 엔터를 치는듯하게 여러줄로 하는방법 

 

11. 초성 중성 종성 모두 분리하고 여러줄로 타이핑

 

 

 

12. 글씨크기를 반응형으로 넣기 

 

 

타이핑이되는 박스의 크기가 고정되어 있어야합니다 

박스의 크기가 고정되지 않으면 아래영역에 영향을 주게 되어 아래 영역이 움직입니다.

 

고정크기는 vh나 vw 와 같이 화면 크기에 영향을 받은 반응형크기단위를 넣어주었습니다.

 

글씨 크기 또한 자신을감싸고있는 영역의 폰트 크기에 영향을 받는  em 단위를 이용해 넣어 보았습니다. 

 

반응형 단위 

-->

[CSS/CSS 응용] - [em]반응형을 좀 더 편하게 할 수 있는 폰트사이즈 단위/쉽게 알아보기

 

 

 

 

 

 

댓글관련 추가 

----풀페이지에서 해당 섹션 접근시 타이핑이 진행되도록 

 

타이핑이 1개인 경우

typing_test.zip

0.03MB

타이핑이 2개인 경우

typing_test (2).zip

0.03MB