Как создать анимированный заголовок с помощью JQuery. Что мы собираемся делать
Слова звучат лучше, когда они оживают. Глядя на последние тенденции дизайна наклонных форм и заголовков, доминирующих в интернете, можно с уверенностью сказать, что есть много библиотек и шаблонов на выбор, когда дело доходит до внешнего вида веб-сайта. Но как насчет правильного посыла? Функциональность анимации заголовков может сочетаться с этими тенденциями, чтобы создать сильное и впечатляющее сообщение.
Однако мы объединили список лучшей, самой красивой и мощной текстовой анимации, которая придаст вашему сайту современный вид и посыл через сильное сообщение. Эти примеры можно использовать в качестве вдохновения для вашего следующего дизайн-проекта или как учебное пособие по прокачке навыков CSS3 и JavaScript.
Большинство из приведенных ниже эффектов анимации, были протестированы в разных браузерах и безопасны для использования на вашем сайте, в то время как другие являются экспериментальными проектами и созданы просто в качестве веселой тренировки.
Фреймворки Креативная анимация SVG букв
Вот первый для кодера. Codrops - блог, которые предоставляют читателям учебные руководства, тенденции и вдохновение для веба. В марте 2016 года они опубликовали статью о том, как анимировать SVG буквы с использованием плагина Segment .
Помните, когда мы говорили об экспериментальной анимации? Этот туториал определенно подпадает под эту категорию. В статье рассказывается о демонстрационной анимации, её использовании, о том, как настроить шрифт и других о JavaScript библиотеках.
Также на Codrops есть целый ряд других для веба, которые заставят отвиснуть вашу челюсть.
Элемент сайта, который мы рассмотрим сегодня, является одним из важнейших и очень заметных на странице. Иногда его делают не слишком большим. Он может быть либо статическим, либо динамическим. Всё зависит от желания и фантазий дизайнера и владельца сайта. Возможно, вы уже догадались о чем будет речь — правильно, о шапке сайта. Сегодня мы рассмотрим четыре способа нестандартных способа, с помощью которых можно оформить эту часть сайта. Благодаря этим способам — ваш сайт однозначно выделится на фоне других.
Четыре примера вы можете посмотреть по следующей ссылке:
СкачатьКак пользоваться? — Анимированные шапки для сайтаHTML частьВ коде страницы всё что нужно вставить, это:
| 1 2 3 |
В блоке с идентификатором и классом large-header находится тег , в которм и происходит вся анимация. А блок лишь содержит фоновое изображение.
Javascript частьЗатем в конце страницы необходимо подключить нужные библиотеки. Они находятся в папке js (в архиве с исходниками — ссылка в начале статьи).
Например, для примера №1 нужно подключить следующие библиотеки:
Ниже я сделал скриншоты каждого из эффектов.
Недавно я наткнулся на один веб-сайт. Среди некоторых причудливых эффектов анимированный заголовок привлек мое внимание. Поэтому я решил собрать коллекцию эффектов CSS для заголовков с вращающимися словами!
Создание структурыСтруктура HTML одинакова для каждой анимации. Мы использовали элемент section в качестве контейнера, просто чтобы дать некоторые поля и установить максимальную ширину. Заголовок является тегом h1 tag - block . Каждое слово заключено в тег b , все слова внутри одного элемента span - inline .
Класс.rotate-1 (добавленный в тег h1) определяет применяемый эффект. Если вы просто хотите использовать этот элемент, как он работает: вы меняете класс, вы меняете эффект.
Для некоторых эффектов может потребоваться дополнительный класс. Например: когда каждая буква анимируется отдельно, к тегу h1 нужно добавить класс.letters . Внутри файла index.html вы можете проверить имена классов, применяемых к каждому заголовку.
My favourite food is
pizza
sushi
steak
Давайте посмотрим вместе, как создать эффект 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;
}
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); }); }
Почему бы не украсить заголовок вашего сайта? В сегодняшней статье вы узнаете, как анимировать фоновое изображение вашего заголовка, используя JQuery.
Что мы собираемся делать?Мы собираемся создать заголовок, с анимированным фоном. Кроме этого, мы добавим тень к заголовку, для создания слегка драматического эффекта. Как это будет выглядеть в конце, можно посмотреть .
Как это работаетФоновое изображение заголовка должно быть очень длинное. Это очень важно, поскольку мы создадим заголовок, высотой в 300px . Изображение по всей длине должно быть равным 300px . Это позволит нам прокручивать заголовок без швов. Так что вспомните свои навыки фотошопа, они вам понадобятся. Не беспокойтесь, это не очень трудно. Просто скопируйте верхние 300px вашего изображения и вставьте их вниз. Затем смешайте оригинальный фон с тем, который вы вставили.
Теперь, после того как у нас есть фоновое изображение, нам также нужно создать картинку с тенью. Это будет обычное.png -изображение, с прозрачным центром, который постепенно становится черным, по краям. С помощью CSS, мы наложим этот слой поверх заголовка.
После этого, нам останется только анимировать фон нашего заголовка.
НачнемПервое что нам понадобится, это HTML-разметка. Это довольно просто. У нас есть содержащий div , который центрирует сайт, div для анимированного заголовка, еще один div для наложения тени на заголовок и наконец, div -ы для навигации и основного контента. Конечно div -ов довольно много, но что вы хотели, это же фреймворк:).
HTML-разметка:
Анимированный заголовок Анимированный фон заголовка
CSSЗдесь мы также не будем делать ничего сложного. Вот список того, что мы сделаем:
- центрируем страницу
- назначим заголовку высоту и фоновое изображение
- настроем стиль и расположение текста в заголовке
- создадим теневой слой
- назначим основные стили заголовку и навигации.
CSS-стили:
Body{ background-color: #000; } /* Центрируем страницу */ #wrapper{ width:920px; margin:0 auto; } /* Назначаем заголовку высоту и фоновое изображение */ #header{ height:300px; background: #000 url(background.jpg) repeat-y scroll left top; text-align:center; } /* Создание слоя с тенью */ #header div{ width:920px; height:300px; background: transparent url(overlay.png) no-repeat scroll left top; } /* Вертикальное позиционирование текста заголовка и стилизация */ #header h1{ padding-top:125px; font-family: Arial, "MS Trebuchet", sans-serif; color:white; } /* Назначение основных стилей контенту и навигации */ #body{ background-color:#efefef; height:500px; } #nav{ height:35px; background-color: #111; }
Единственное, на что стоит обратить внимание, прозрачность не работает в IE6. Если вы собираетесь оптимизировать верстку под IE6, вам нужно добавить этот фрагмент кода, для использования полупрозрачного слоя.
JQuery
Существует куча способов анимации фона с JQuery. Вы можете использовать плагин JQuery, который позволяет анимировать фон посредством изменения атрибута background-position . Но я решил не использовать плагин, поскольку заметил не очень хорошую производительность. Вместо этого я использовал интервал, который повторно вызывает функцию. Выглядит это немного уродливо, но зато работает намного лучше.
Код JQuery:
Var scrollSpeed = 70; // Скорость в миллисекундах var step = 1; // Количество пикселей для передвижения за один шаг var current = 0; // Текущая строка пикселей var imageHeight = 4300; // Высота фонового изображения var headerHeight = 300; // Высота заголовка //Строка пикселей, с которой нужно начинать новый цикл var restartPosition = -(imageHeight - headerHeight); function scrollBg(){ //Переходим к следующей строке пикселей current -= step; //Если конец изображения, то переходим снова вверх if (current == restartPosition){ current = 0; } //Устанавливаем CSS заголовка $("#header").css("background-position","0 "+current+"px"); } //Вызываем прокручивающую функцию повторно var init = setInterval("scrollBg()", scrollSpeed);
Соединяем все вместеВот и все. Вот так выглядит полностью собранный код:
Анимированный заголовок body{ background-color: #000; } /* Центрируем страницу */ #wrapper{ width:920px; margin:0 auto; } /* Назначаем заголовку высоту и фоновое изображение */ #header{ height:300px; background: #000 url(background.jpg) repeat-y scroll left top; text-align:center; } /* Создание слоя с тенью */ #header div{ width:920px; height:300px; background: transparent url(overlay.png) no-repeat scroll left top; } /* Вертикальное позиционирование текста заголовка и стилизация */ #header h1{ padding-top:125px; font-family: Arial, "MS Trebuchet", sans-serif; color:white; } /* Назначение основных стилей контенту и навигации */ #body{ background-color:#efefef; height:500px; } #nav{ height:35px; background-color: #111; } #header div{ background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale"); } Анимированный фон заголовка var scrollSpeed = 70; // Скорость в миллисекундах var step = 1; // Количество пикселей для передвижения за один шаг var current = 0; // Текущая строка пикселей var imageHeight = 4300; // Высота фонового изображения var headerHeight = 300; // Высота заголовка //Строка пикселей, с которой нужно начинать новый цикл var restartPosition = -(imageHeight - headerHeight); function scrollBg(){ //Переходим к следующей строке пикселей current -= step; //Если конец изображения, то переходим снова вверх if (current == restartPosition){ current = 0; } //Устанавливаем CSS заголовка $("#header").css("background-position","0 "+current+"px"); } //Вызываем прокручивающую функцию повторно var init = setInterval("scrollBg()", scrollSpeed);