typed.js를 사용하여 애니메이션 타이핑 효과를 만드는 방법

개요

Typed.js는 자바 스크립트 및 기타 스크립팅 언어를 지원하는 애니메이션 라이브러리입니다. 텍스트에 타이핑 애니메이션 효과를 제공합니다. 라이브러리에 CDN 링크를 추가하거나 NPM(노드 패키지 관리자) 또는 Yarn을 사용하여 설치하여 라이브러리를 사용할 수 있습니다. 단락이나 제목에 애니메이션을 입력하는 웹 페이지를 제공합니다. 따라서 typed.js의 타이핑 애니메이션 효과에 대해 더 자세히 알아야 합니다. 애니메이션을 사용하기 위해 type.js는 두 개의 매개변수를 입력으로 받아들이는 typed()라는 생성자를 제공합니다.

문법

생성자 유형의 객체를 생성하는 구문은 -

위에 제공된 구문에서 클래스 또는 ID는 타이핑 애니메이션이 작동하는 대상 요소입니다. 콜백 함수는 문자열 유형의 배열과 입력 속도, 반환 속도, 루프 및 반환 속도 지연과 같은 일부 유형 생성자 속성을 포함하는 함수입니다.

알고리즘

1단계 −텍스트 편집기에서 HTML 파일을 만들고 그 안에 HTML 상용구를 추가합니다.

2단계− HTML 문서의 head 태그에 typed.js CDN 링크를 추가합니다.

3단계 − 이제 ID 이름이 "typed-text"인 div 컨테이너를 만듭니다.

4단계 −body 태그가 끝나기 전에 script 태그를 생성하세요.

5단계 − 형식화된 생성자를 인스턴스화하고 객체를 생성하여 참조 변수에 저장합니다.

6단계 − 두 개의 매개변수를 요소의 ID 이름으로 형식화된 생성자에 전달하고 문자열 텍스트와 입력 속도를 포함하는 함수를 typespeed로 전달합니다.

7단계 −브라우저에서 index.html 파일을 열면 대상 텍스트에 타이핑 애니메이션이 표시됩니다.

예

이 예에서는 typed.js를 사용하여 텍스트에 타이핑 애니메이션을 만듭니다.

아래 이미지는 위 예제의 출력을 보여주며 브라우저 화면에 일부 텍스트가 표시됩니다. 사용자가 브라우저에서 이 HTML 파일을 열면 실시간으로 작동하는 타이핑 애니메이션을 볼 수 있습니다.

결론

typed.js를 사용할 때 유형 객체를 올바르게 초기화하기 위한 구문을 확인하고 작성해야 하며, 구문에 오류가 있으면 애니메이션이 제대로 작동하지 않습니다. 유형 생성자에 전달된 콜백 함수의 값을 변경하여 필요에 따라 입력 속도와 대기 시간을 사용자 정의할 수 있습니다.

위 내용은 typed.js를 사용하여 애니메이션 타이핑 효과를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!