X
Заказать услугу

Эффект печати текста или плавное появление текста по буквам

Плагины и Шаблоны для Wordpress
  • 2018-12-12
  • 11165 просмотр

    12 комментарий

  • Дизайн и разработка сайта

Доброго времени суток. 🙂

Этот урок расскажет Вам как добиться очень интересного эффекта, который сделает анимацию в виде печати текста. То есть, будет происходить плавное появление текста, буква за буквой.

Эффект набора текста

Такой эффект можно применить на сайте для Вывода какого-нибудь текстового блока или рекламного сообщения. Все это будет осуществляться благодаря jQuery и CSS. Изначально каждая строка полностью прозрачная, потом пошагово с определенной задержкой все стает видимым и получается эффект набора текста.



Пример

Чтобы добавить такой блок с анимацией себе на сайт Вам нужно сделать следующие действия.

Шаг №1

В шапку перед закрывающимся head или в подвал перед закрывающимсяbody, Вам надо подключить библиотеку jQuery. Если это сделано ранее, то пропустите этот шаг.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

Шаг №2

Далее нужно подключить скрипт, который и будет совершать анимацию нашего блока с текстом. Подключать его нужно в подвале. Если подключить в шапке, анимация может не работать.

<script type="text/javascript">
$(document).ready(function(){
 $.fn.animate_Text = function() {
  var string = this.text();
  return this.each(function(){
   var $this = $(this);
   $this.html(string.replace(/./g, '<span class="new">$&</span>'));
   $this.find('span.new').each(function(i, el){
    setTimeout(function(){ $(el).addClass('div_opacity'); }, 40 * i);
   });
  });
 };
 $('#example').show();
 $('#example').animate_Text();
});
</script>

В 9 строке есть значение - 40, это задержка между анимацией. Чем больше число, тем медленнее будут появляться буквы и наоборот, если указать число меньше, анимация будет более плавной и быстрой.

Шаг №3

Теперь добавим сам блок, внутри которого будет текст, к которому будет применена анимация.

<div id="example">
Тут Ваш текст, который будет появляться.
Строка за строкой, с плавным эффектом.
Все это возможно при помощи
jQuery и CSS.</div>

Шаг №4

Далее последний шаг, это добавить стили,

#example{padding:0px 0px 0px 100px;display:none;}
#example .new{opacity: 0;}
#example .div_opacity{
  -webkit-transition: opacity .1s ease-in-out;
  -moz-transition: opacity .1s ease-in-out;
  -ms-transition: opacity .1s ease-in-out;
  -o-transition: opacity .1s ease-in-out;
  transition: opacity .1s ease-in-out;
  opacity: 1;}

Все как обычно, стили можете настроить под себя. Сделав все правильно, у Вас появится анимация схожая с набором текста. Вот так вот.

На этом все, спасибо за внимание. 🙂

Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)

Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 10, в среднем: 4.2 из 5
Читайте также
Опубликовано 12 комментариев

Добавить комментарий

Чтобы оставить комментарий - заполните поля ниже. Ваш e-mail не будет опубликован. Все поля обязательны

Нажмите, чтобы добавить код в комментарий. Далее добавьте свой код внутрь тегов <code> тут код </code>
Я ознакомлен(а) с политикой конфиденциальности и даю согласие на обработку персональных данных*

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.