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

Дата публикации: 2015-03-10

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

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

Первым делом установим библиотеку textillate.js, для этого переходим на сайт //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>

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

<html>

<head>

<title>Анимация текста</title>

<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>

<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(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');
			}
		}
	});
	
 });

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);
	
 });