티스토리 뷰

어느날 jQuery의 type.js 를 이용해 문자열을 타이핑하는 효과를 주고 있었는데,


현재 화면에 나타났을 때, 타이핑 효과가 시작되도록 해달라는 요청이 들어왔다.


구글링해본 결과, jQuery 플러긴에 visible 이라는 확장 프로그램이 있어 이것을 응용해 해당 요청을 처리하였다.



준비물:


1. type.js (바로가기)

2. visible.js (바로가기)



소스코드:

마크업:

<span class="when-show-ani-typing">

  <p> 이 텍스트가 브라우져 화면에 노출되면, 타이핑 효과를 시작한다. </p>

</span>


자바스크립트:

  var gClass = '.when-show-ani-typing';

  $(gClass).find('p').hide();

  var didScroll = false;

  $(window).scroll(function(e) {

    didScroll = true;

  });


  setInterval(function() {

    if (didScroll) {

      checkAniType(gClass);

    }

  }, 250);


  // 이미 노출된 곳에서 수행 되도록.

  checkAniType();


  function checkAniType(selector) {

    $(selector).each(function() {

      var typedOpt = {

        strings: [],

        typeSpeed: 35,

        backSpeed: 0,

        startDelay: 100,

        backDelay: 9000000,

        loop: true,

        loopCount: false,

        showCursor: false,

        cursorChar: "|",

        attr: null

      };

      var visible = $(this).visible(false);

      if (visible) {

        var p = $(this).find('p');

        var text = $(p).text();

        $(p).text('');

        typedOpt.strings = [text];

        $(this).typed(typedOpt);

      }

    });

  }



소스를 보면 알겠지만, 맨 처음 먼저 확인해보고 이미 노출되 있으면, 타이핑을 시작하도록 하고, 스크롤링 할 때마다 250ms 간격으로 확인하도록 되어 있습니다.


값을 적절하게 수정하시어서 사용하시면 될거 같네요.