[팬텀디자인] 글자 타이핑 효과 정보
[팬텀디자인] 글자 타이핑 효과
관련링크
https://safi.me.uk/typewriterjs/
761회 연결
본문
typewriter를 활용한 예시
오늘 소개드릴 팁은 글자 타이핑 효과입니다.
현재 저희 사이트에서도 사용하고 있는 플러그인인데요.
전반적으로 사용법도 간단하고, 기능이 생각보다 많은 플러그인입니다.
플러그인의 이름은 typewriter.js 입니다.
원하시는 위치에 아래 코드를 넣어주시면 됩니다.
<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>
그누보드에는 기본적으로 jquery가 include 되어있기 때문에 그누보드 내 페이지에서는 위 코드만으로 사용이 가능하지만, 별개의 페이지를 생성하여 이용하실 때는 반드시 jquery를 불러와주셔야 정상적으로 작동합니다.
감사합니다.
추천
20
20
댓글 27개
감사합니다. 이용해 보겠습니다.
@arari 감사합니다.
감사합니다
@드비앙s 감사합니다.
아주 좋습니다. 감사합니다.
@들레아빠 벌써 적용까지 해보셨네요^^ 감사합니다.
유용하네요 감사합니다.
@브러운아이 감사합니다.
감사합니다.^^
필요했던 자료입니다.
잘 사용하겠습니다.
필요했던 자료입니다.
잘 사용하겠습니다.
@휴매니아 작은 팁이지만 도움 되셨으면 좋겠습니다. 감사합니다^^
와 감사합니다.
@hikuki 감사합니다.
감사합니다~ 잘 응용하였습니다.
@허당빵 감사합니다.
좋은 자료 감사합니다.
해당 스크립트가 들어가있는 페이지가 열려있을때는 로그인 기능이 안먹히는것 같아요.
해결법이 있으면 참 좋겠습니다.
해당 스크립트가 들어가있는 페이지가 열려있을때는 로그인 기능이 안먹히는것 같아요.
해결법이 있으면 참 좋겠습니다.
@하루열갑 그누보드 원본을 기준으로 테스트 해 본 결과, 페이지가 열려있을 때도 로그인 기능이 정상적으로 작동하는 걸 확인했습니다. 로그인 부분에 별다른 코드가 삽입되어있으신건 아니실까요?
@팬텀디자인 클라우드플레어를 주석처리하니 잘 작동합니다. 좋은자료에 너무 감사합니다.
@하루열갑 해결되셔서 다행이네요. 감사합니다^^
고맙습니다. 잘사용하겠습니다.
@미터강 네 감사합니다^^
공유 감사드립니다~!
@coDribble 감사합니다^^
정말 작성해주셧네요 ㅋㅋㅋ 제가 요청했었는데 해주다니 감동입니당~!!
굿굿
감사합니다.
이런 꿀팁을...감사합니다
세상 좋은 꿀팁입니다~ 잘 쓰겠습니다^^
