Май 30, 2020 Запись была обновлена
Анимированный появляющийся текст
В этом уроке мы рассмотрим как создать анимированный появляющийся текст. Иногда нужно сделать чтобы текст не просто появился на странице, а постепенно, плавно или наоборот быстро но только после полной загрузки страницы. Возможно нужно просто выделить какую-либо часть текста, чтобы пользователь обратил внимание(я имею ввиду продающую страницу или страницу захвата). В уроке присутствует несколько видов появления, поэтому вы можете выбрать наиболее понравившийся.
Пример можно увидеть здесь:
Посмотреть примерСкачать
Как пользоваться?
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».
Вывод
Интересный эффект для текста, который можно использовать как на продающей странице, так и на странице захвата, чтобы привлечь внимание пользователя 🙂 .
Успехов!
Еще материалы по этой теме
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Это конечно красиво и интересно, но стоит ли скриптами утежелять страницу, Пользователю в первую очередь нужна информация за которой он пришёл, а не спецэффекты.
Алексей, конечно вы правы, не стоит утяжелять, поэтому лучше всего выбор сделать на каком-то одном, если это возможно.
Было бы не плохо добавить настройку, чтобы не по одной буквы появлялись, а сразу весь текст, все перебирались и по одной останавливались в нужном значении.
По типу этого плагина http://codepen.io/GreenSock/pen/dIBbw
На ссылке jquery_gallery а не text
Проверьте ссылку пожалуйста))