Главная
Web-дизайн
Эффект печати текста или плавное появление текста по буквам

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

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

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

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

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

Опубликовано 2 комментария

  • Оля
    Комментариев: 1

    Вечер добрый! спасибо за решение, оно чудесно!
    единственно, что - если на странице сделать несколько таких блоков, то работает только первый.
    остальные не отображаются вообще(

    • Виталий
      Комментариев: 267

      Попробуйте каждому блоку задать свой айди, то есть не для всех #example, а например #example потом #example1 #example2 и тд,
      также аналогично и в скрипте.
      Также в скрипте есть еще класс "new", его тоже нужно в каждом скрипте для каждого блока прописать свой. А если Вы просто копируете несколько одинаковых, то у Вас конфликт и конечно же не работает 🙂

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

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий