Простая анимация текста, используя textillate.js

Простая анимация текста, используя textillate.js

От автора: В данном уроке хотел бы поговорить о библиотеке textillate.js, которая буквально позволяет оживить тексты или заголовки Ваших веб-страниц. Таким образом, при отображении страницы текст будет появляться на странице с выбранной Вами анимацией. Что не только улучшит внешний вид страницы, но и поможет акцентировать внимание пользователей на определенных блоках сайта.

автор

Автор: Виктор Гавриленко

Меня зовут Виктор Гавриленко, по образованию я инженер электромеханик. Еще учась в институте, начал увлекаться компьютерными технологиями и программированием, на протяжении двух лет усиленно занимаюсь разработкой интернет сайтов и веб-программированием. Увлекаюсь написанием небольших скриптов на языке PHP, в связке базами данных MySQL, SQLite, неплохо знаю такие движки как WordPress, Drupal, Joomla.

скачать исходникискачать урок

Установка библиотеки

Первым делом установим библиотеку textillate.js, для этого переходим на сайт http://jschr.github.io/textillate/ и кликаем по кнопке Download on Github:

Далее нас перенаправляют на сервис GitHub, где представлена актуальная версия данной библиотеки:

Теперь кликаем по кнопке Download ZIP и скачиваем архив к себе на компьютер. Для сегодняшнего урока я подготовил следующую страницу:

Ее исходный код представлен ниже:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>

<title>Анимация текста</title>
<meta name="" content="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link  rel="stylesheet" href="css/animate.css"/>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.textillate.js"></script>
<script type="text/javascript" src="js/jquery.lettering.js"></script>
<script type="text/javascript" src="js/script.js"></script>


<style>
	
	body {
		
		background-color: rgb(75, 191, 195);
	}

	#txt {
		
		text-align: center;
		font-size: 10em;
		font-family: "monotype corsiva"
		
	}
	
	#tlt {
		text-align: center;
		font-size: 4em;
	}
	li {
		
		list-style: none
	}
	
</style>

</head>
<body>
<h1 id="txt">Textillate</h1>

<div style="height:300px; overflow: hidden;">
<h1 id="tlt">
    <ul class="texts">
        <li data-out-effect="fadeOut" data-out-shuffle="true">Заголовок</li>   
        <li data-in-effect="fadeIn">Дополнительный текст</li>
    </ul>
</h1>
</div>
</body>
</html>

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

<link  rel="stylesheet" href="css/animate.css"/>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.textillate.js"></script>
<script type="text/javascript" src="js/jquery.lettering.js"></script>
<script type="text/javascript" src="js/script.js"></script>

Для работы библиотеки textillate.js, необходима библиотека jquery, которая должна подключаться самой первой. Файл script.js – это пустой файл, в котором мы будем кодировать на языке JavaScript.

Теперь открываем файл script.js и добавим следующий код:

jQuery(document).ready(function() {
	
	$("#txt").textillate({});
	
 });

То есть, выбираем при помощи библиотеки jQuery блок с идентификатором txt и вызываем метод .textillate(). Который запустит анимацию текста при отображении в браузере:

Настройки анимации

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

jQuery(document).ready(function() {
	
	$("#txt").textillate({
		selector:'.texts',
		loop:true,
		minDisplayTime:1000,
		autoStart:true,
		in: {
			effect:'flipInY',
			delayScale:0.4,
			delay:3000,
			sync:false,
			shuffle:false,
			reverse:false,
			callback:function() {
				//alert('hello');
			}
			
		},
		out: {
			effect:'rotateOut',
			callback:function() {
				//alert('hello');
			}
		}
	});
	
 });

Хотел бы отметить, что поддерживается два вида анимации. Анимация in – это появление текста и анимация out – исчезание текста. Каждая из этих анимация настраивается отдельно.

Настройки:

selector – селектор блока с текстом, для которого должна работать анимация. Данная настройка необходима, если при вызове метода textillate(), был выбран блок, внутри которого есть список элементов ul, а также дополнительные блоки, которые не должны участвовать в анимации. К примеру, на тестовой странице, есть блок <h1 id=»tlt»>, внутри которого расположен список <ul class=»texts»>. Метод textillate(), вызывается для блока h1, а настройка selector, сдержит селектор .texts.

loop – зацикливание анимации, при этом текст будет появляться и исчезать;

minDisplayTime – время отображения текста перед анимацией исчезания;

autoStart – если передать false, то анимация будет запрещена и текст показан не будет, до тех пор, пока анимация не будет запущена вручную.

Настройки анимаций in и out:

effect – анимационный эффект. Список анимационных эффектов, приведен в дополнительных материалах к уроку.

delayScale – коэффициент временной задержки для каждого последующего символа текста, к которому применена анимация. Используя данный коэффициент, можно регулировать скорость анимации.

delay – время в миллисекундах анимации каждого символа;

sync – анимация всех символов одновременно, если передать значение true;

shuffle – анимация символов текста в случайном порядке, если передать значение true;

reverse – анимация в обратном порядке, если передать значение true;

callback – функция которая выполнится после завершения анимации, либо in либо out.

Помимо настроек, библиотека поддерживает несколько методов:

$(«#txt»).textillate(‘in’) – запуск анимации in;

$(«#txt»).textillate(‘out’) – запуск анимации out;

$(«#txt»).textillate(‘stop’) – остановка анимации;

$(«#txt»).textillate(‘start’) – запуск анимаций in и out;

Хотел бы отметить, что если анимация применяется к блоку со списком элементов, к примеру к блоку ul, то анимация отрабатывает для каждого элемента списка в отдельности. При этом, каждому элементу списка (каждый текст), присваивается индекс, начиная с нуля. Индексы, можно использовать для вызова анимации к определенному элементу списка.

Например, следующий код, запустит анимацию in для текста с индексом 1, блока с идентификатором #tlt (а точнее второго элемента списка ul):

jQuery(document).ready(function() {
	
	$("#tlt").textillate({
		
		selector:'.texts',
		autoStart:false,
		
	});
	
	$("#tlt").textillate('in',1);
	
 });

При этом мы увидим, что на экране с анимацией появится надпись “Дополнительный текст”:

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

События:

start.tlt – срабатывает при запуске анимационных эффектов textillate;

inAnimationBegin.tlt – срабатывает при запуске анимации in;

inAnimationEnd.tlt – срабатывает при окончании анимации in;

outAnimationBegin.tlt – срабатывает при запуске анимации out;

outAnimationEnd.tlt– срабатывает при окончании анимации out;

end.tlt– срабатывает при завершении работы плагина textillate.

На этом данный урок завершен. Всего Вам доброго и до новых встреч!

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. Никки

    Спасибо! С вашим уроком разобрался, а с исходником не получалось.

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree