Webmasters.BY

Сегодня мы создадим набор красивых эффектов для крупных заголовков используя CSS3 и JQuery. Множество вещей можно сделать при помощи CSS3-анимации и переходов, и мы рассмотрим некоторые из этих возможностей.

Мы также будем использовать скрипт Lettering.js, чтобы работать с отдельными буквами в слове, которое будет в нашем большом заголовке.

Изображения, используемое в демо от Andrey & Lili.. Они распространяются на условиях лицензии  Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) License.

HTML

Структура будет простая, тег h2 с ссылкой внутри. Мы обернем заголовок в контейнер "letter-container":

Затем мы вызовим плагин Lettering.js, чтобы каждая буква была обернута в тег span.

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

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

Пример 1

В первом примере мы хотим исказить буквы, чтобы создать небольшую перспективу. Но мы также хотим изменить слово при наведении курсора мыши, поэтому наш код будет содержать дополнительный элемент A внутри тега h2. Чтобы эффект работал хорошо, мы выберем два слова с одинаковым числом букв:

Мы установим для ссылок абсолютное позиционирование и спрячем второе слово, указав для него opacity равную 0:

Теги span будут иметь некоторые правила для тени текста и переходов. Каждый дочерний четный элемент будет повернут на 10 градусов, а нечетный на -10 градусов:

Когда мы наводим курсор мыши на тег h2, мы хотим, чтобы появилось второе слово, а первое исчезло:

Кроме того, мы хотим выпрямить буквы:

Пример 2

Во втором примере мы поиграем немного с псевдо-элементами. Во-первых, мы зададим стили для каждого тега span таким образом, чтобы он выглядел как фото полароида:

Затем мы добавим псевдо элемент, который будет содержать градиент, что позволит нашему полароиду выглядеть более реалистичным:

Теперь, мы будем поворачивать четные и нечетные буквы в разные стороны, чтобы они выглядели как разбросанные фотографии:

Для каждого символа (мы используем классы, создаваемые lettering.js, но мы могли бы также использовать селектор nth-child) мы будем добавлять различные фоновые изображения:

При наведении на каждую ссылку, мы будем поворачивать тег span и увеличивать его в размерах:

При наведении мыши мы создаем анимацию, которая перемещает фоновое изображение:

Пример 3

В третьем примере мы будем применять анимацию к тегу span, которая будет выполняться один раз при загрузке страницы. Мы сделаем размытые буквы более строгими. Мы также будем использовать маску, чтобы добавить текстуру на буквы (поддерживается только Webkit браузерами, на данный момент):

При наведении на букву мы будем менять её цвет:

Мы создадим рандомное появления букв, задавая каждой букве задержку анимации:

Анимация превращает размытую, нечеткую и прозрачную букву в букву с резкими краями, четким цветом и тонкими тенями:

Пример 4

Этот пример довольно сильно отличается от предыдущих, потому что мы будем применять немного больше JQuery. Чтобы понять, что мы делаем, я покажу вам, что наша функция JQuery делает из заголовка. Код, который создается для каждой буквы после применения lettering.js получается следующий:

Почему такая структура? Мы хотим поиграть с перспективой и 3D-трансформацией, так что нам нужно еще несколько элементов, чтобы сделать эту работу.

Мы хотим, чтобы этот заголовок выглядел как информационное табло аэропорта, и когда мы наводим курсор мыши на тег span, мы хотим чтобы верхний элемент падал вниз, но в 3D! Это будет работать только в браузер Webkit, но у нас будет хорошая альтернатива и для других.

Итак, давайте начнем со стилей для новой обертки. Это будет контейнер с перспективой:

Затем мы определяем фон буквы, который будет желтым:

Нижняя часть буквы в обоих "tdown" и "tup" ("tback") контейнерах будет скрываться благодаря отрицательному отступу:

Все элементы будут иметь абсолютное позиционирование. Элементы внутри "tup" будут иметь свойство -webkit-backface-visibility: hidden. Таким образом мы сможем повернуть "tback" в 3D пространстве, а затем "tup", при наведении:

Когда мы не имеем поддержки 3D-трансформации, то мы не показываем "tback". Вместо этого, мы анимируем "tup" и "tdown", перемещая их вниз:

Пример 5

Итак, пример 5 выглядит немного сумасшедшим: мы создадим тени текста, которые "поднимают" буквы. Мы также создадим псевдо элемент, который содержит супергероя в качестве фона:

При наведении, мы будем анимировать размер фона, чтобы сделать супергероя больше:

Тег span будет иметь свойство text-shadow, которое "поднимает" буквы, а при наведении мыши мы будем сдвигать буквы вниз, добавив отступы и изменив тени:

Пример 6

В этом примере мы будем делать что-то подобное, что и в примере 3, кроме того мы будем анимировать буквы по очереди.

Мы также будем применять маску, которая создаст некоторые текстуры буквами:

Анимация будет "писать" письмо и мы будем применять различную задержку анимации к каждому дочернему элементу:

Пример 7

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

Вы можете прочитать о радиальном градиенте здесь.

Ну вот и всё! Надеюсь вам понравились эти необычные типографические эффекты созданные при помощи CSS3 и jQuery!

Какой ваш любимый?

Скачать исходники

Перевод