웹프로그램밍 자료실/JAVA 자료
[해피CGI][cgimall] 텍스트 입력 및 삭제 애니메이션 - animateTyping.js
해피CGI윤실장
2020. 2. 26. 09:12
animateTyping.js는 컨테이너 요소 내에서 텍스트의 입력 및 삭제 애니메이션으로 타자기 효과를 내는 Jquery 플러그인입니다.
- 라이센스
MIT
- 작동 브라우저
Chrome, IE 9 이상, FireFox, Opera, Safari
- 사용 방법
1. 파일 상단에 JQuery 라이브러리와 jquery.animateTyping.js 파일 링크를 걸어줍니다.
2. 객체에 animate-typing 속성을 부여하고 문구를 입력하면 플러그인이 나머지를 알아서 처리합니다.
3. 여러 줄의 문구를 입력하고 삭제하는 애니메이션을 구현하려면 간단하게 여러줄을 입력하면 됩니다.
4. data-animate-loop 속성으로 입력/삭제 애니메이션을 반복할 수 있습니다.
5. 다음과 같이 애니메이션 속도 및 지연(delay)를 설정할 수 있습니다.
6. data-cursor-speed 속성으로 입력/삭제시 문구 끝에 커서가 깜빡이는 속도를 설정할 수 있습니다.
- 작동 예제