-
CSS / typeit 라이브러리로 html 타이핑 효과 주기Web dev/HTML&CSS 2023. 4. 23. 22:28728x90반응형
typeit 으로 간단한 타이핑효과를 구현했다.
typeit 공홈에 가면 스크립트까지 짜준다! 개꿀!..
// CDN으로 import <script src="https://unpkg.com/typeit@8.4.0/dist/index.umd.js"></script>
CSS는 그냥 하고싶은대로 스타일링 해주면 된다! 개꿀
<p id="introTxt"></p>
속도,딜레이,삭제등 원하는대로 타이핑 효과를 표현할 수 있다!.
부가적인 기능은 typeit 공홈을 정독하면 된다! 개꿀
new TypeIt("#introTxt", { speed: 120, }) .type("안녕하세요. :)",{delay: 400}) .delete(2 ,{delay: 700}) .delete(7) .type("프론트엔드 개발자 ") .type("양홍열입",{delay: 500}) .delete(5,{delay: 300}) .type("로 성장중인<br/>") .type("웹 퍼블리셔 양홍열입니다.") .go();
728x90반응형'Web dev > HTML&CSS' 카테고리의 다른 글
CSS / 따라다니는 마우스 포인터 커스텀하기 (0) 2023.04.23 CSS / Scollbar custom 스크롤바 커스텀하기 (0) 2022.10.30 CSS / placeholder 색상바꾸기 (0) 2022.03.13 CSS / 텍스트 줄임 ...처리 (0) 2022.03.13