[Javascript Typing Effect] 자바스크립트 타이핑 효과 - iTyped.js



#. Introduction


안녕하세요. 앱작가입니다. 이번에는 자바스크립트로 타이핑효과를 내는 플러그인을 소개하고자 합니다. 이 글은 블로그의 첫 포스팅으로써 재미없기 짝이 없는 문법은 하지 않고, 신기방기한 플러그인과 연구용도로 운영하고자 작성하는 글입니다. 여러분들이 재밌는 기술들을 알게 된다면 더욱 프로그래밍에 관심을 가질 수 있으라 생각하고 작성하는 글이기도 합니다. 


타이핑 효과란 어떤 것을 말하는 것일까요? 눈으로 보는 것이 제일 빠를 것입니다. 바로, 아래의 효과가 타이핑 효과입니다. 마치 키보드로 타이핑하는 듯한 효과를 줄 수 있습니다.



#. Description


해당 플러그인 이름은 'iTyped.js' (https://ityped.surge.sh/) 라는 자바스크립트 플러그인입니다. 자바스크립트 플러그인은 아주 많은 종류가 있습니다. 타이핑 플러그인의 종류는 찾아보면 분명 많겠지만, 어느 정도 소개를 드리자면 다음과 같습니다. 


iTyped.jshttps://ityped.surge.sh/

https://github.com/luisvinicius167/ityped

TypeIthttps://macarthur.me/typeit/

https://github.com/alexmacarthur/typeit

TypeTypehttp://iamdanfox.github.io/typetype/


그 중에서 우리는 'iTyped.js' 플러그인을 살펴 볼 것입니다. 중요한 사실은,  jQuery 에 대해서 전혀 종속하지 않는다는 것입니다. 즉, 이 플러그인을 사용 할 때 jQuery 를 로드하지 않고, 오직 자바스크립트로만 사용할 수 있다는 것입니다. 


*일부 브라우저에 적용이 안 되는 경우 다른 플러그인을 사용 해주시기 바랍니다.



#. Code


이 라이브러리를 어떻게 사용하면 될까요? 결론부터 보자면 다음과 같습니다. 


<script src="iTyped/dist/ityped.min.js"></script>
<script>
    window.ityped.init(document.querySelector('#ityped'), {
        strings : ['What is Lorem Ipsum?'],
        loop : true
    });
</script>


사실 사용법은 이것이 전부입니다. 참 간단하죠?


일단 플러그인을 사용하려면 문서를 포함하고, init 함수를 호출합니다. 기본형은 다음과 같습니다. element 는 자바스크립트 DOM 이며, config 는 옵션들을 말합니다.


init(element, config);


옵션은 아래와 같은 종류가 있는데, 각각을 모두 쓸 필요는 없으며, 쓰고 싶은 것만 사용해서 사용해주시면 됩니다.


/**
  * @name config
  * @description The initial typed configuration
  * @param {Array} strings // 타이핑 효과를 줄 문자열
  * @param {Integer} typeSpeed T// 타이핑 속도
  * @param {Integer} backSpeed // 백스페이스 속도
  * @param {String} cursorChar // 커서의 문자
  * @param {Integer} backDelay // 백스페이스를 하기 전 시간
  * @param {Integer} startDelay // 타이핑을 시작하기 전 시간
  * @param {Boolean} showCursor // 커서를 보여줄건가요?
  * @param {Boolean} loop // 반복횟수
  * @param {Function} onFinished // 모든 문자가 타이핑 된 이후 호출되는 콜백함수
  **/

  const config = {
    strings: ['Dead simple animated typing.', 'No dependencies'],
    //optional
    typeSpeed:  100, //default
    //optional
    backSpeed:  50, //default
    //optional
    startDelay: 500, //default
    //optional
    backDelay:  500, //default
    //optional    
    loop:       false, //default
    //optional
    showCursor: true, //default
    //optional    
    cursorChar: "|", //default
    // optional callback called (if `loop` is false) once the
    // last string was typed
    onFinished: function(){},
  }



#. PostScript


해당 플러그인에 대해서 조금 더 알고싶으시다면, 해당 문서(https://github.com/luisvinicius167/ityped)를 참고해주시기 바랍니다. 자바스크립트 및 jQuery 에는 더욱 많은 플러그인이 있습니다! 다음에는 또 다른 플러그인으로 찾아오겠습니다 :)


신고