" 묵묵히 갈 길을 갈 수 있는 것도 용기 "

오딘박스(OdinBOX), 혁신을 이룹니다.

글자 타이핑하는 효과를 주는 라이브러리 사용방법

간지뽕빨리턴씨 2022. 6. 26. 19:42
반응형

라이브러리,자바스크립트,JS,JAVASCRIPT,오픈소스,깃허브

조금 더 이쁘게 보일 수 있는 방법은?

홈페이지를 만들게 되면 기능도 물론 신경을 써야 하지만 이용자가 들어오게 되면 먼저 보게 되는 디자인 요소를 생각해야 하는데 저 또한 홈페이지를 만들게 되면 제일 먼저 신경을 써야 하는 부분은 디자인이라고 생각합니다. 아무리 기능이 좋다고 하더라도 디자인이 좋지 않다면 이용하는 이용자 입장에서 매우 힘들 수 있다고 생각이 들기 때문입니다. 그래서 다양한 오픈소스 라이브러리들이 많지만 오늘은 타이핑 효과를 사용할 수 있는 라이브러리에 대해서 소개해드리려고 합니다.

목차

    typewriter-effect

    ⓒ Typewriter JS V2

    해당 라이브러리는 실제로 제가 홈페이지에서 사용을 했던 라이브러리입니다. 홈페이지에 처음 접속을 하게 되면 홈페이지에 관련한 안내 사항이나 소개 글을 타이핑 효과로 조금 더 이목을 집중을 할 수 있도록 만들었고 실제로 적용을 하고 사용을 해보니 저는 만족을 했고 주위 사람들에게 물어보니 반응이 나쁘지 않았습니다.

    사용방법

    Typewriter[#] 홈페이지에 접속을 하면 라이브러리를 다운로드 및 설치를 할 수 있는 안내가 나옵니다.

    CDN

    <script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>

    NPM

    npm install typewriter-effect@2.18.2

    설치파일

    typewriter-effect-2.18.2.tgz
    0.02MB

    예제소스

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://unpkg.com/typewriter-effect@2.3.1/dist/core.js"></script>
    
    $(document).ready(function() {
        var text = document.getElementById("odinboxStyle");
    
        var typewriter = new Typewriter(text, {
            loop: true
        });
    
        typewriter.typeString('안녕하세요 글쓰는 효과 테스트중인 오딘박스입니다.')
            .typeString('글쓰는 효과, 타이핑')
    		.pauseFor(2000)
            .deleteAll()
            .pauseFor(2000)
            .deleteChars(2)
            .typeString('<strong>Writer!</strong>')
            .pauseFor(2500)
            .start();
    
    });
    
    <div id="writerTest">
        <div id="odinboxStyle"></div>
    </div>

    쉽고 간편하게 적용할 수 있는 라이브러리 어떠셨나요? 실제로 여러분의 홈페이지 직접 적용을 하고 디자인 효과와 함께 색다른 모습의 홈페이지의 모습을 연출할 수 있다고 생각합니다. 혹시나 적용을 하시다가 모르는 것이 있다면 댓글을 통해 남겨주시면 답변을 드리도록 하겠습니다.