8

У меня есть тег DIV с текстом внутри. Можно ли изменить текстовое содержимое в цикле с помощью печатающего эффекта, где он выводится, а затем идет назад, удаляя буквы и начиная все заново с нового текста? Это возможно с jquery?

Перевод вопроса: typing animated text @Erik

3

2 ответа 2

11

Довольно простое решение:

var $typer = $('.typer'),
    txt = $typer.data("text"),
    tot = txt.length,
    ch  = 0;

(function typeIt() {   
  if(ch > tot) return;
  $typer.text( txt.substring(0, ch++) );
  setTimeout(typeIt, ~~(Math.random()*(300-60+1)+60));
}());
/* PULSATING CARET */
.typer:after {
  content:"";
  display: inline-block;
  vertical-align: middle;
  width:1px;
  height:1em;
  background: #000;
  animation: caretPulsate 1s linear infinite; 
  -webkit-animation: caretPulsate 1s linear infinite; 
}
@keyframes caretPulsate {
  0%   {opacity:1;}
  50%  {opacity:1;}
  60%  {opacity:0;}
  100% {opacity:0;}
}
@-webkit-keyframes caretPulsate {
  0%   {opacity:1;}
  50%  {opacity:1;}
  60%  {opacity:0;}
  100% {opacity:0;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="typer" data-text="Привет! Моё имя Al. Я проведу вас через весь процесс установки приложения."></span>

Таким образом, в основном jQuery получает data-text вашего элемента, добавляет символ за символом, а пульсирующая черточка ("caretPulsate") - это нечто анимированное при помощи CSS3 :after элемента SPAN.

Перевод ответа: typing animated text @Roko C. Buljan

7

анимация печатающего эффекта для текста на css

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.b-container {
  margin: 25px auto;  
  padding: 15px 25px;
  max-width: 400px;
  background: #222;
  color: #fff;
  border-radius: 3px;
}

.text-list,
.text-list li{
  overflow: hidden;
  line-height: 1.25;  
}
.text-list > li {
  white-space: nowrap;
  border-right: 1px solid;
  -webkit-animation: animT1 4s steps(30, end), animBlinkCaret 1s step-end 4s;
          animation: animT1 4s steps(30, end), animBlinkCaret 1s step-end 4s;
}
.text-list > li:nth-child(2) {
  -webkit-animation: animT2 4s steps(30, end), animBlinkCaret 1s step-end 4s;
          animation: animT2 4s steps(30, end), animBlinkCaret 1s step-end 4s;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
}

@-webkit-keyframes animT1 {
  from {
    width: 0;
  }
  to {
    width: 350px;
  }
}

@keyframes animT1 {
  from {
    width: 0;
  }
  to {
    width: 350px;
  }
}

@-webkit-keyframes animT2 {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

@keyframes animT2 {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

@-webkit-keyframes animBlinkCaret {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: #fff;
  }
}

@keyframes animBlinkCaret {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: #fff;
  }
}
<div class="b-container">
  <pre>
  <ol class="text-list">
    <li><code>Привет! Моё имя Al. Я проведу вас</code></li>
    <li><code>через весь процесс установки приложения.</code></li>  
  </ol>  
  </pre>
</div>

2
  • вопрос немного не по теме, но пользуясь случаем задам вам, как знатоку CSS: в настоящее время нужны браузерные префиксы? Я встречал разные мнения, но не пришел к однозначному выводу. 17 июл 2017 в 16:16
  • 1
    @Alexandr_T caniuse.com/#feat=css-animation - unprefixed: 82.09%. Использую для android 4 версии, + safari 8
    – soledar10
    17 июл 2017 в 16:20

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.