X
  • Дизайн та розробка сайту
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

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

Приклад
  • 2024-03-28
  • 27397 переглядів

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

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

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

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

Такой эффект можно применить на сайте для Вывода какого-нибудь текстового блока или рекламного сообщения. Все это будет осуществляться благодаря 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
Проголосовало: 17, в среднем: 4.3 из 5
Читайте також