Автор

13 05.2017
Анимированные заголовки

Анимированные заголовки


Коллекция анимированных заголовков со сменными словами, которые заменяют друг друга с помощью CSS-переходов.

 

ДЕМО
ИСХОДНИКИ

 

Недавно я наткнулся на один веб-сайт. Среди некоторых причудливых эффектов анимированный заголовок привлек мое внимание. Поэтому я решил собрать коллекцию эффектов CSS для заголовков с вращающимися словами!

 

Создание структуры

Структура HTML одинакова для каждой анимации. Мы использовали элемент section в качестве контейнера, просто чтобы дать некоторые поля и установить максимальную ширину. Заголовок является тегом h1 tag - block. Каждое слово заключено в тег b, все слова внутри одного элемента span - inline.

Класс .rotate-1 (добавленный в тег h1) определяет применяемый эффект. Если вы просто хотите использовать этот элемент, как он работает: вы меняете класс, вы меняете эффект.

Для некоторых эффектов может потребоваться дополнительный класс. Например: когда каждая буква анимируется отдельно, к тегу h1 нужно добавить класс .letters. Внутри файла index.html вы можете проверить имена классов, применяемых к каждому заголовку.

<section class="cd-intro">
<h1 class="cd-headline rotate-1">
<span>My favourite food is</span>
<span class="cd-words-wrapper">
<b class="is-visible">pizza</b>
<b>sushi</b>
<b>steak</b>
</span>
</h1>
</section> <!-- cd-intro -->

 

Добавление стиля

Давайте посмотрим вместе, как создать эффект Rotate 1. Процесс схож для каждой анимации, не стесняйтесь путешествовать по исходным файлам (или, почему бы нет, попробуйте создать анимацию самостоятельно!).

Прежде всего, давайте применим класс .rotate-1 к тегу h1!

Идея состоит в том, чтобы создать трехмерное вращение: видимое слово должно исчезнуть, вращаясь по оси X, новое слово должно появиться снизу и взять свободное место, всегда вращаясь по оси X.

 

 

Чтобы работать в 3D-пространстве, нам нужно установить перспективное значение, иначе анимированные элементы будут выглядеть плоскими. Помните: свойство Perspective не должно применяться к элементу, который будет анимирован (через CSS Transition, Transformation или Animation), но к родительскому элементу. В этом случае я применил свойство перспективы к .cd-words-wrapper:

.cd-headline.rotate-1 .cd-words-wrapper {
display: inline-block;
perspective: 300px;
}

При наличии свойства Perspective мы нацеливаем элементы b (каждое слово), и мы устанавливаем opacity: 0; и position: absolute;. Таким образом мы скрываем все слова, и мы удаляем их из потока документа, как будто они больше не занимают пространство. Наконец, мы используем .is-visible класс, примененный к первому элементу b (первое слово), и добавляем opacity: 1; и position: relative;. Так мы делаем первое слово видимым.

Обратите внимание, что мы применяем преобразование rotateX (180deg) к каждому слову, чтобы перевернуть его. Значение начала преобразования устанавливается внизу (первое значение X, второе значение Y). Это важная деталь: как вы можете видеть из .gif выше или в демонстрации, начало вращения не является центром, и мы должны указать его в CSS. Тогда, конечно, поворот устанавливается на 0, если применяется .is-visible класс.

.cd-headline.rotate-1 b {
opacity: 0;
transform-origin: 50% 100%;
transform: rotateX(180deg);
display: inline-block;
position: absolute;
left: 0;
top: 0;
}

.cd-headline.rotate-1 b.is-visible {
position: relative;
opacity: 1;
transform: rotateX(0deg);
}

Нам нужно запустить анимацию: с помощью jQuery мы удаляем класс .is-visible из первого элемента и добавляем его ко второму, затем удаляем его из второго и добавляем к третьему и т. Д. - чтобы создать петля. Каждый раз, когда мы удаляем .is-visible класс, мы переключаем его на .is-hidden. Зачем нам нужны 2 класса: в каждом классе мы определяем другую CSS-анимацию. .is-visible - показать слово, .is-hidden, чтобы скрыть его, конечно. Посмотрите, как изменяется CSS с добавлением анимаций:

.cd-headline.rotate-1 b {
opacity: 0;
transform-origin: 50% 100%;
transform: rotateX(180deg);
display: inline-block;
position: absolute;
left: 0;
top: 0;
}

.cd-headline.rotate-1 b.is-visible {
position: relative;
opacity: 1;
transform: rotateX(0deg);
animation: cd-rotate-1-in 1.2s;
}

.cd-headline.rotate-1 b.is-hidden {
transform: rotateX(180deg);
animation: cd-rotate-1-out 1.2s;
}

Все, что остается делать, - это определить ключевые кадры для обеих анимаций. Причина, по которой мы выбрали анимацию над переходами, - это дополнительная сила при определении промежуточных событий. Именно так мы создаем эффект «ожидание». Работа с ключевыми кадрами явно работает с концепциями движения. Вы можете активизировать свои взаимодействия, распределяя их по временной шкале.

@keyframes cd-rotate-1-in {
0% {
transform: rotateX(180deg);
opacity: 0;
}
35% {
transform: rotateX(120deg);
opacity: 0;
}
65% {
opacity: 0;
}
100% {
transform: rotateX(360deg);
opacity: 1;
}
}

@keyframes cd-rotate-1-out {
0% {
transform: rotateX(0deg);
opacity: 1;
}
35% {
transform: rotateX(-40deg);
opacity: 1;
}
65% {
opacity: 0;
}
100% {
transform: rotateX(180deg);
opacity: 0;
}
}

 

Обработка событий

Чтобы вызвать анимацию заголовка, мы определили функцию animateHeadline ().

var animationDelay = 2500;
 
animateHeadline($('.cd-headline'));
 
function animateHeadline($headlines) {
	$headlines.each(function(){
		var headline = $(this);
		//trigger animation
		setTimeout(function(){ hideWord( headline.find('.is-visible') ) }, animationDelay);
		//other checks here ...
	});
}

Это используется для запуска функции hideWord () с задержкой в 2.5 секунды. Эта функция удаляет .is-visible класс из первого слова и добавляет его ко второй, удаляя .is-hidden класс из второго и добавляя его к первому слову. Затем hideWord () снова запускается (с той же задержкой), чтобы создать цикл.

function hideWord($word) {
	var nextWord = takeNext($word);
	switchWord($word, nextWord);
	setTimeout(function(){ hideWord(nextWord) }, animationDelay);
}
 
function takeNext($word) {
	return (!$word.is(':last-child')) ? $word.next() : $word.parent().children().eq(0);
}
 
function switchWord($oldWord, $newWord) {
	$oldWord.removeClass('is-visible').addClass('is-hidden');
	$newWord.removeClass('is-hidden').addClass('is-visible');
}

Одно замечание:

Есть некоторые эффекты, которые требуют анимации отдельных букв отдельно (например, эффект типа). Для этих анимаций мы добавили класс .letters в h1 и обернули каждую букву внутри элемента i с помощью функции singleLetters ().

singleLetters($('.cd-headline.letters').find('b'));
 
function singleLetters($words) {
	$words.each(function(){
		var word = $(this),
			letters = word.text().split(''),
			selected = word.hasClass('is-visible');
		for (i in letters) {
			letters[i] = (selected) ? '' + letters[i] + '': '' + letters[i] + '';
		}
	    var newLetters = letters.join('');
	    word.html(newLetters);
	});
}

 

Вот и всё!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

18 05.2013
Анимированные заголовки

Буквально на каждом сайте можно найти выпадающие элементы. Это весьма интересный способ организации материала на  сайте, ведь элементы по умолчанию скрыты, и пользователю необходимо выполнить определенные действия, чтобы увидеть полный список, например нажать на элемент выбора. Зачастую такие элементы весьма скучны и однообразны, при этом не привлекают взор посетителя, тем самым теряя драгоценные клики по сайту. В данном уроке мы рассмотрим как можно стилизовать выпадающий список с различными эффектами.


08 12.2014
Анимированные заголовки

  1. Использовать как часы
  2. Использовать в качестве таймера
  3. Использовать в качестве обратного отсчета
  4. Поддерживает широкий спектр использованием CSS
  5. Аннотация всех используемых объектов
  6. Полнофункциональный API для разработчиков и создания пользовательскогоциферблата

12 03.2013
Анимированные заголовки

Вопрос: почему мало создать сайт и разместить его адрес на POS-материалах?

Я создал сайт, потратил кучу денег на его «раскрутку», разместив везде его адрес. Почему же я до сих пор беден?!

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


28 11.2014
Анимированные заголовки

Вертикальное меню очень полезно, ведь в него может вместиться множество полезной информации. Различными блоками, меню выполненных в стиле «аккордеон», сейчас уже никого не удивишь. Предлагается масса интересных решений и техник исполнения, как с использованием jQuery, так и основанных только на CSS. В сегодняшнем уроке мы рассмотрим весьма интересное решения построение такого блока навигацией, мы добавим несколько правил анимации, при этом вертикальная навигация будет полностью рабочей и отвечать всем пользовательским запросам.


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close