Печатающийся текст Jquery c полем Input

Question

Всем привет. Решил сделать интересную форму с вопросами при печатающимся тексте как на этом видео https://dribbble.com/shots/12209934-Signup-Interaction

То есть получается так есть исходный текст в котором время от времени встречаться поля input. Текст должен печатается до появления поля и ждать ввода текста после чего продолжится печатать.

Как реализовать данную задачу? Нашел одну библиотеку но там нет функции паузы "jquery-bubble-text".

Спасибо

Answer 1

забавная задачка, таймеры в помощь.

function start(target){
  let p = $(target).find("p");
  let txt = $(p).text().split(/(\S\s?)/).filter(x => x);  
  let idx = 0;
  
  $(p).text(null).toggle(true);
  
  var h =  setInterval(function(){     
              let ctext = txt.slice(0, ++idx);
              $(p).text(ctext.join(''));
              if(idx == txt.length){
                 clearInterval(h);
                 $(target).find("input")
                    .toggle(true)
                    .change(function(){
                        let next = $(target).data('next');
                        if(next){
                           $(target).data('next', null);
                           start(next);
                        } 
                    });
              }
          }, 25);
  
}


start("#block-1");

p { display: none; }
input { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="block-1" data-next="#block-2">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis gravida gravida. Nulla venenatis dui eros, in volutpat nunc rhoncus id. </p>
  <input type="text"/>
</div>

<div id="block-2">
  <p>Nam mi urna, luctus eu sodales vel, maximus eu nisl. Nam sed velit et leo pretium imperdiet vitae sit amet odio. Proin sed urna sapien. Quisque cursus ut dolor vel sollicitudin. </p>
  <input type="text"/>
</div>

БЛОГ НА HUSL

Печатающийся текст Jquery c полем Input

Ответы (1 шт):