Анимированный заголовок в виде изображения

Анимированный заголовок в виде изображения

От автора: в последнее время я много думал о том, какова природа веб-сайтов и какую философию дизайна мы должны принимать, как веб-дизайнеры и разработчики. Веб-сайт что-то содержит, но он должен быть безудержным. Он написан, но он двумерен. Сайт должен быть гибким, но по нему должно быть легко перемещаться. Такие вещи сложно понять, но еще сложнее «правильно реализовать». Это телевидение, только интерактивное. Это как постер, только без рамок и границ. Дизайн может использовать 3 измерения. Это одновременно стопка бумаги и широкий плакат. В конце концов, интернет – это то, что вы из него делаете. Подозреваю, такова была цель W3C. Благодаря коду, который они одобрили, а браузеры реализовали, веб-сайт сейчас может быть тем, чем мы хотим его видеть. Это открывает множество возможностей.

Например, анимированные заголовки. Об этом я думал несколько дней назад, когда смотрел событие. Я подумал: «а что если документальный баннер будет медленно двигаться по мере того, как пользователь будет читать текст?». И я решил создать демо. Результат:

Фоновое изображение двигается очень медленно, увеличиваясь с фокусом на медведей. Текст поддерживает изображение и наоборот. Давайте разберемся, как это сделать.

Первая проблема, с которой я столкнулся – как получить текст поверх изображения. Сначала я установил фото на фон и добавил текст поверх фона. Довольно просто, но я не мог анимировать изображение. Мне не нужно, чтобы вся группа изображения и текста увеличивалась, увеличиваться должно только изображение. Поэтому мне потребовалось отделить все элементы и сложить их поверх друг друга с помощью абсолютного позиционирования. Конечный HTML:

Заметьте, в хедер я включил 2 элемента: изображение и текст. Для наложения одного элемента на другой необходимо добавить position: relative в стили хедера, после чего абсолютно спозиционировать текст и баннер. Я добавил значения z-index, чтобы элементы были разграничены по необходимым мне слоям. CSS:

Заметьте, я добавил overflow: hidden к контейнеру изображения. Это позволяет увеличивать изображение внутри «рамки», так сказать. Если этого свойства не будет, изображение будет налезать на остальной текст на сайте.

Теперь перейдем к анимированию изображения.

Можно использовать JS, но мне нравится использовать CSS, если это возможно. Анимация загружается мгновенно и более производительная. С CSS анимацией легко работать, но придется немного изучить синтаксис. Это не обычный CSS. Ознакомиться с примерами можно в серии уроков по CSS анимации на канале DevTips YouTube.

Я создал класс, в который можно добавить анимацию — .slow-grow. CSS:

Чтобы создать анимацию в CSS, сначала необходимо объявить анимацию через @keyframes. Затем необходимо задать название анимации. Название используется в свойстве animation для класса или элемента, которое хотите анимировать. В этом примере анимация называется grow, и я добавил свойство animation в класс .slow-grow. Анимация увеличит изображение в 1.5 раза с начала анимации 0% до конца 100%.

Я могу выбрать пару значений для настройки времени выполнения анимации и прикрепить их к классу, используя свойство animation. Сначала необходимо назвать анимацию, затем указать длительность, тип движения и время. Я выбрал функцию ease-in-out, но можно легко взять и linear. Это значение тоже хорошо будет смотреться.

Со временем выполнения возникла сложность. Мне нужно было, чтобы изображение увеличивалось очень медленно. Поэтому я очень долго игрался со значениями. Между размером увеличения изображения и скоростью анимации есть сбалансированная связь. Чем меньше масштаб, тем быстрее должна быть анимация. Чем больше масштаб, тем медленнее должна быть анимация. Надеюсь, это имеет смысл. Можете поиграться со значениями и понять, о чем я говорю.

Заключительная часть всего уравнения – нечто мощное и тонкое. С какого направления проводить увеличение? По умолчанию изображение увеличивается вверх от центра. Как решить – необходимо посмотреть расположение текста и расположение фокуса изображения. Мне хотелось сосредоточить пользователя на медведях (снизу справа), а текст оставить слева вверху. Удобно было масштабировать изображение снизу справа, так как именно туда я хотел увеличить фото. Смысл техники – медленно перевести внимание пользователя в определенную часть изображения. Поэтому выберите эту часть изображения и установите transform-origin для увеличения в выбранную область. Для нашего изображения использовалось значение transform-origin: bottom right;. Вы можете тонко настроить зум с помощью огромного выбора значений. Также поиграйтесь с медиа запросами, чтобы все правильно отображалось на всех устройствах. Я понял, что это свойство мне нужно добавить не к контейнеру, а к самому изображению, так как класс .slow-grow я добавлял именно к изображению.

Еще раз конечный результат:

Отличный эффект, который можно добавить куда угодно и создать тонкую анимацию. Если хотите создать больше эмоций на сайте, эффект отлично сработает.

Нравится? Нет? Можете улучшить? Оставляйте комментарии. С радостью почитаю ваши мысли! Можете спокойно забирать демо себе и использовать в своих проектах. Если и правда хотите использовать демо, оставьте в комментариях ссылку на сайт. С радостью посмотрю, как оно работает в жизни!

Автор: Brian Haferkamp

Источник: //codepen.io/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

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