.jpg)
자바스크립트를 공부하는 중 실습을 통해 학습하는 것이 더 효율적이라고 생각되어 HTML&CSS로 작성한 자기소개 페이지의 글자 일부에 대해 타이핑 효과를 주어야겠다고 생각했습니다.
원하는 효과
- 한 글자씩 타이핑 하듯이 글자가 나타나는 효과
- 오른쪽에 커서를 만들어 실제 타이핑 하는 느낌 구현
- 문장이 다 나타나고 3초정도 후에 처음부터 다시 나타나도록 무한 반복
타이핑 효과를 위해서는 자바스크립트에서 코드를 작성하여야 합니다.
-. 먼저 타이핑 효과를 줄 문구를 작성하고, querySelector를 통해 HTML에 작성한 class를 선택해줍니다.
-. 타이핑 효과를 위해 한 글자씩 접근을 하기 위해 index=0; 으로 변수를 선언해줍니다.
(문자열의 순서는 0부터!!)
-. 이후 텍스트 컨텐츠에 인덱스 값을 하나씩 넣어주는 함수를 작성해줍니다!
-. 그리고 인덱스 값이 컨텐츠의 길이보다 길어졌을 때(글자를 다 읽어 읽을 문자가 없어지는 경우) 텍스트 컨텐츠를 초기화 해주고, 인덱스 값도 초기화하여 처음부터 다시 작성할 수 있도록 작성합니다.
-. 마지막으로 setInterval(함수, ms)를 통해 타이핑 함수를 주기적으로 동작하도록 해줍니다.
커서 효과는 CSS에서 작성합니다.
-. @keyframes cursor를 작성하여 border-color: transparent로 지정하여 투명하게 합니다.
-. border-right를 만들어 오른쪽에 커서 모양을 만들고, animation: cursor를 통해 깜빡이는 효과를 지정해줍니다. (깜빡이는 시간 조정 가능)
문장이 끝나고 약 3초간 멈추었다가 다시 타이핑이 반복되도록 하기 위해서 시간 지연을 위해 파이썬의 time.sleep()과 같은 함수를 쓰고 싶었습니다만...아쉽게도 자바스크립트에서는 별도의 지연 함수가 없는 것 같습니다😢
몇 가지 방법을 찾아 setTimeout()함수와 Promise를 활용한 방법을 쓰고 싶었으나 구현이 되지 않아 반복문을 사용하였습니다...(이 방법의 경우 성능 문제가 생길 수 있어 안좋은 방법이라고 생각됩니다)
시간 지연에 대해서는 추후 학습을 통해 더 효율적은 방법을 찾아보도록 하겠습니다👍
아래는 작성한 코드입니다. (코드펜이라는 새로운 것을 발견하였습니다😃😃😃)
