Лого SiteHere.ru

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

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

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

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

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



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

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/

4 комментария к записи
  • Алексей

    Это конечно красиво и интересно, но стоит ли скриптами утежелять страницу, Пользователю в первую очередь нужна информация за которой он пришёл, а не спецэффекты.

     
    • Юрий

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

       
  • Борис

    Было бы не плохо добавить настройку, чтобы не по одной буквы появлялись, а сразу весь текст, все перебирались и по одной останавливались в нужном значении.
    По типу этого плагина http://codepen.io/GreenSock/pen/dIBbw

     
  • Слава

    На ссылке jquery_gallery а не text
    Проверьте ссылку пожалуйста))

     

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

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