[ vrtpr | ViRTuaPRinter ]

README.md

vrtpr | ViRTuaPRinter | Виртуальный имитатор набора текста

!Нид джекуери

Параметр	Описание	дефаулт
vrtpr_d	Задержка перед началом печати	200
vrtpr_d_prev_del	Задержка перед началом удаления	200
vrtpr_d_print	Максимум для рандомной задержки перед вводом буквы	333
vrtpr_d_del	Максимум для рандомной задержки перед удалением буквы	100

Примерчанский

<h1>
  <span class="vrtpr _delete_">Текст который удалится после того как напечатается</span>
  <span class="vrtpr" data-vrtpr_d="1800" data-vrtpr_d_print="100">Текст который напечатается 1.8 секунды спустя, с большой скоростью, максимум 0.1 сек задержка перед каждой буквы</span>
</h1>

main.js

// vrtpr | ViRTuaPRinter
// - Параметры
var
  vrtpr_length = $(document).find('.vrtpr').length - 1 // Сколько блоков где печатать

// - Разбиваем буквы спаном
$(document).find('.vrtpr').each(function(){
  $(this).html('<span>' + $(this).text().replace(/([^,](?!,|$))/g,'$1</span><span>') + '</span>')
})

// - Анимация ввода
$(document).find('.vrtpr').each(function(index){
  var
    vrtpr = $(this)
    vrtpr_d = vrtpr.data().vrtpr_d ? vrtpr.data().vrtpr_d : 200 // Задержка перед началом печати
    vrtpr_d_prev_del = vrtpr.data().vrtpr_d_prev_del ? vrtpr.data().vrtpr_d_prev_del : 200 // Задержка перед началом удаления
    vrtpr_timeout = setTimeout(function () {
      vrtpr.addClass('_active_') // Показ блока с текстом

      // -- Пеать текста
      var vrtpr_d_print = vrtpr.data().vrtpr_d_print ? vrtpr.data().vrtpr_d_print : 333 // Установка задержки
      vrtpr.find('span').first().delay( Math.floor(Math.random() * Math.floor( vrtpr_d_print )) ).show( 0 , function vrtpr_showNext() {
        $(this).addClass('_vrtpr_cursor_').siblings().removeClass('_vrtpr_cursor_')
        $(this).next('span').delay( Math.floor(Math.random() * Math.floor( vrtpr_d_print )) ).show( 0 , vrtpr_showNext )

        // -- удаляем текст когда напечатали, если надо
        if (!$(this).next().length){
          // Если не последний блок
          if ( index < vrtpr_length )
            $(this).removeClass('_vrtpr_cursor_') // Удаляем курсор если всё напечатали

          if (vrtpr.hasClass('_delete_')) {
            var vrtpr_time_del = setTimeout(function () {
              var vrtpr_d_del = vrtpr.data().vrtpr_d_del ? vrtpr.data().vrtpr_d_del : 100 // Установка задержки удаления
              vrtpr.find('span').last().delay( Math.floor(Math.random() * Math.floor( vrtpr_d_del )) ).hide( 0 , function vrtpr_hidePrev() {
                $(this).prev('span').delay( Math.floor(Math.random() * Math.floor( vrtpr_d_del )) ).hide( 0 , vrtpr_hidePrev )
              })
            }, vrtpr_d_prev_del )
          }
        }
      })
    }, vrtpr_d )
})
// vrtpr x

main.sass

// vrtpr | ViRTuaPRinter
.vrtpr
  visibility: hidden
  
  &._active_
    visibility: visible

  span
    position: relative
    display: none
    line-height: 1
    z-index: 1

    &._vrtpr_cursor_
      &:after
        content: ''
        position: absolute
        left: 100%
        top: 0
        bottom: 0
        height: 100%
        width: 5px
        background: black

        animation: _vrtpr_cursor_ linear 1s
        animation-iteration-count: infinite

@keyframes _vrtpr_cursor_
  0%
    opacity: 1
  50%
    opacity: 0
  100%
    opacity: 1
// vrtpr x