X
Юрий Немец

Анимированный появляющийся текст

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

Пример можно увидеть здесь:

Посмотреть примерСкачать



Как пользоваться?

HTML часть

Необходимо скачать jQuery(здесь) и плагин jquery.flipping_text.js(здесь), а затем подключить:

1
2

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery.flipping_text.js"></script>

HTML код очень простой. Вам лишь нужно задать определенный класс, например, для заголовка:

1
2
3
4
5

<body>
    ..
    <h1 class="intro">...</h1>
    ..
</body>


jQuery часть

Чтобы использовать плагин на страницу необходимо добавить следующий код:

1
2
3
4
5
6
7

$(".intro").flipping_text({
    tickerTime: 10,
    customRandomChar: false,
    tickerCount: 10,
    opacityEffect: true,
    resetOnChange: false
});

Плагин самостоятельно считает количество символов. Рассмотри что представляет каждое из этих свойств:

  • tickerTime — задается в миллисекундах. Определяет насколько быстро будет появляться буква.
  • customRandomChar — данное свойство позволяет задать произвольный набор символов, которые будут показываться перед появлением каждого символа текста. Убедиться в этом можете на Демо 4.
  • tickerCount — определяет сколько символов нужно «перебрать» перед тем как показать нужный символ из последовательности текста.
  • opacityEffect — возможность сделать символ который только появился нечетким(серым). Принимает значения «false» и «true».
  • resetOnChange — позволяет сохранить сколько символов появилось когда пользователь кликнул на другую вкладку. Может принимать значения «false» и «true».


Вывод

Интересный эффект для текста, который можно использовать как на продающей странице, так и на странице захвата, чтобы привлечь внимание пользователя 🙂 .


Успехов!

Источник: http://www.onextrapixel.com/2014/01/28/flippingtext-js-create-a-ticking-intro-animation-for-your-typography/

Категории: jQuery