Главная
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
(5 голосов, в среднем: 4.2 из 5)

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

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

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

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

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

  • Олег
    Комментариев: 5

    Все работает, спасибо огромное! Однако, в самом блоке (......) текст не поддаётся форматированию средствами HTML (то есть, абзац, новая строка, подчёркивание и т.д.). Возможно какое-либо решение проблемы? Заранее признателен за ответ.

  • Олег
    Комментариев: 5

    ...То есть, в блоке (<div id="example">......</div>)

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

      А Вы попробуйте средствами CSS и удивитесь 🙂 Средствами HTML с появленим HTML5 вообще не рекомендуется что либо делать с стилями. Тем более что этот скрипт автоматически из каждой буквы создает отдельный элемент. Я же в статье ясно написал - Все как обычно, стили можете настроить под себя. 🙂
      То есть все что нужно для форматирования текста прописывайте в виде CSS параметров для #example.
      Вот и все. Пробуйте 🙂

  • Олег
    Комментариев: 5

    Спасибо за отклик!
    ...Признаться, я не нашёл, как оптимально можно реализовать перенос строк средствами CSS... Вы предлагаете регулировать перенос строки шириной блока? Но это будет произвольный перенос... А если нужен перенос с конкретного слова? А пустая строка? А если выделить необходимо не весь текст, а одно слово? Создавать для этого одного слова отдельный класс и стиль? Несколько громоздко и неуклюже, в сравнении с обычной, устаревшей разметкой, не находите? Впрочем, я должно быть, чего-то недопонимаю. Однако и в и-нете решения я не нашёл. Не поясните, что вы имели ввиду, если конечно, это не сильно Вас затруднит?..

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

      Как я и написал - данный скрипт разбивает слова на буквы и каждая из них становится отдельным элементом и ей присваивается свой класс. Например, чтобы выделить второе слово. в нашем примере это слово ВАШ
      Вам можно использовать псевдокласс :nth-child Он используется для добавления стиля к элементам на основе нумерации в дереве элементов.
      Получается Вам нужно считать буквы и нужным добавлять этот псевдокласс. В итоге получится так:
      #example .new:nth-child(5),#example .new:nth-child(6),#example .new:nth-child(7){ color:#f00; }
      Так это будет выглядеть как на скриншоте - http://prntscr.com/dr0l3i
      Как видите, по стилях, мы задали красный цвет 5,6,7 букве, как раз слово - ВАШ.
      Для отступа строки, например, я высчитал, что пробел в конце первой строки - это 41 символ. и сделал его блочным элементом + добавил отступ сверху в 25 пикселей. Вуаля и типа пустая строка.
      #example .new:nth-child(40){margin-top:25px;display:block;}
      Результат такой как на скриншоте -
      http://prntscr.com/dr0qv2
      Перенос, делаю той же методикой. Высчитываю, что пробел перед словом - "БУДЕТ" это 23 символ по счету. Присваиваю ему свойство блочного элемента и происходит перенос.
      #example .new:nth-child(23){display:block;}
      Результат - http://prntscr.com/dr0shc
      Ну и так далее для каждого случая. Нужно приложить руки и подумать, как конкретно решить определенную задачу.

      Данный скрипт делает красивую анимацию для простенького текста и все. Например для слайдера или вывода какого-то сообщения пользователю. Он не предназначен для создания умопомрачающего эффекта, который сможет воплотить все Ваши идеи в нескольких строках кода и печатать меморандумы в 1000 символов с различными эффектами для каждого слова, абзаца, страницы. 🙂
      Если Вам нужно что-то более сложное - создайте его 🙂

  • Олег
    Комментариев: 5

    🙂 Спасибо огромное, добрый человек! И отдельное спасибо - за долготерпение! 🙂 Как я и предполагал, решение нельзя назвать изящным, но за отсутствием иных, выбирать не приходится. Понятно, что этот скрипт изначально предполагает ограниченное использование, в качестве небольшого украшательства. Но мне, к сожалению, приходится, исходя из задачи и глупой моей бестолковки (и поставившей эту задачу), придётся пользовать его (скрипт, бишь), чуть более широко, чем он предусматривает собой. Ещё раз огромное спасибо за отзывчивость и долготерпение!

  • Олег
    Комментариев: 5

    Да, и чуть было не забыл: с прошедшим Новым годом и приближающимся Рождеством Вас! Счастья Вам, мира и удачи!

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

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

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

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

Это не спам *

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

Привет дорогой друг

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