[팬텀디자인] 글자 타이핑 효과 > 그누보드5 팁자료실

그누보드5 팁자료실

[팬텀디자인] 글자 타이핑 효과 정보

[팬텀디자인] 글자 타이핑 효과

본문

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

댓글 27개

좋은 자료 감사합니다.
해당 스크립트가 들어가있는 페이지가 열려있을때는 로그인 기능이 안먹히는것 같아요.
해결법이 있으면 참 좋겠습니다.
그누보드 원본을 기준으로 테스트 해 본 결과, 페이지가 열려있을 때도 로그인 기능이 정상적으로 작동하는 걸 확인했습니다. 로그인 부분에 별다른 코드가 삽입되어있으신건 아니실까요?
전체 2,411 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT