Typed.js - 텍스트 타이핑 효과

개인 포트폴리오 사이트 메인에 있던 효과이며 텍스트가 타이핑되는 효과를 주는 라이브러리다. 

 

여러 가지 옵션을 통해서 속도, 반복, 커서 모양, 애니메이션 효과 등 설정할 수 있다.

 

적용 방법은 js를 불러주고 아래 소스를 이용하면 된다.

<script>
	$(function(){
		var typed2 = new Typed('.typed', {
			strings: ['텍스트 타이핑 효과', '속도, 반복, 커서모양, 페이드 효과 등', '애니메이션 라이브러리'],
			typeSpeed: 100,
			backSpeed: 100,
			fadeOut: false,
			smartBackspace: true,
			cursorChar: '|',
			loop: true
		});
	})
</script>

<span class="typed"></span>

 

자세한 내용은 아래 링크를 참고

mattboldt.com/demos/typed-js/

JavaScript Animated Typing with Typed.js | by Matt Boldt