[팬텀디자인] 글자 타이핑 효과
typewriter를 활용한 예시
오늘 소개드릴 팁은 글자 타이핑 효과입니다.
현재 저희 사이트에서도 사용하고 있는 플러그인인데요.
전반적으로 사용법도 간단하고, 기능이 생각보다 많은 플러그인입니다.
플러그인의 이름은 typewriter.js 입니다.
원하시는 위치에 아래 코드를 넣어주시면 됩니다.
[code]
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://www.cssscript.com/demo/simple-typewriter-effect-pure-javascript-typewriterjs/typewriter.js"></script>
<p id="typewriter"></p>
<script>
var typing = document.getElementById('typewriter');
var typewriter = new Typewriter(typing, {
loop: true,
cursor:'|'
});
typewriter.typeString('PhantomDesign')
.pauseFor(2500)
.deleteAll()
.typeString('미래를 함께하는')
.pauseFor(2500)
.deleteChars(7)
.typeString('디자인입니다.')
.start();
</script>
[/code]
그누보드에는 기본적으로 jquery가 include 되어있기 때문에 그누보드 내 페이지에서는 위 코드만으로 사용이 가능하지만, 별개의 페이지를 생성하여 이용하실 때는 반드시 jquery를 불러와주셔야 정상적으로 작동합니다.
감사합니다.
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기
댓글 27개
아주 좋습니다. 감사합니다.
필요했던 자료입니다.
잘 사용하겠습니다.
해당 스크립트가 들어가있는 페이지가 열려있을때는 로그인 기능이 안먹히는것 같아요.
해결법이 있으면 참 좋겠습니다.