Создайте современные hover эффекты на CSS3

От автора: свойство CSS transition дает нам возможность анимировать изменения значения свойства CSS. Это можно использовать для постепенного гладкого изменения значения, а с помощью задержки имитировать переход элементов. Свойство CSS transform позволяет преобразовать элементы в двух- или трехмерном пространстве. В этом учебнике мы применим 2D-преобразования.

Шаг 1 – создание базового HTML

Сначала создаем простую основу HTML.

Так мы построили разметку своего блока. Блок содержит изображение и div hover_info, где будет та информация, которую нужно отобразить при проведении мышью.

Шаг 2 – создание базового CSS

Далее мы создаем CSS, назначаем основные стили и создаем первый переход. Для удобства этот учебник написан без учета префиксов.

Теперь, после добавления CSS наш блок содержит изображение и div под названием hover_info. В этот CSS мы добавили немного основных стилей для block_holder и блока .block . Добавили к div’у hover_info фон с непрозрачностью 80%, абсолютное позиционирование для того, чтобы разместить его вне блока, и применили к .block overflow hidden, чтобы div hover_info не появлялся.

Затем использовалось свойство CSS transition, которое дает возможность определить элементы, к которым нужно применить переход. Мы воспользовались all, поэтому переход применяется ко всем элементам, где изменено значение. Установили продолжительность на 200мс – так долго будет длиться переход для всех измененных элементов. Наконец, применили linear в качестве функции расчета времени, что означает: наши переходы будут от начала и до конца иметь постоянную скорость. Затем мы используем transform для вращения div’а на 90 градусов.

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

В этом CSS при проведении мышью над блоком мы меняем свойства top, left и transform div’а hover_info . Так анимируется div, накладываемый поверх изображения. При проведении мышью div должен вернуться на место, как видно на этом демо-примере.

Шаг 3 – добавление окончательного HTML

Теперь, когда при проведении мышью есть основа с изначальным переходом, мы добавим в div hover_info содержимое в виде заголовка, абзаца и ссылки.

Шаг 4 – добавление окончательного CSS

Когда HTML готов, добавим ко всем элементам стили.

Мы разместили H1 в 25px от верха и изначально в 100% слева для того, чтобы вначале он был скрыт. При проведении мышью меняем левую позицию на 0 с тем, чтобы H1 выскользнул слева. Применяем при проведении мышью свойство transition-delay с установкой на 200мс, чтобы то происходило после изначального перехода.

Мы применили это к классу hover, а не исходному классу, чтобы свойство применялось, когда пользователь впервые проводит мышью над областью. Когда мышь убирается с области, задержка не применяется и переход происходит мгновенно.

Мы поместили абзац в 85px от верха и 10% слева с шириной в 80%. Так создастся впечатление того, что абзац находится в центре блока. Мы установили непрозрачность на 0, поэтому он изначально не появляется, и установили переход transition к непрозрачности opacity со скоростью 200мс при помощи функции линейного расчета времени.

При проведении мышью мы затем установили непрозрачность на 1, что заставляет появиться текст. Установили задержку в 600мс, что означает переход случится после первоначального вращения и выскальзывания заголовка.

Мы назначили этому тэгу те же стили, что и тэгу заголовка, за исключением того, что на этот раз он находится внизу справа и снова изначально расположен справа. При проведении мышью мы затем делаем переход справа со скоростью 200мс при линейной скорости, на этот раз с задержкой в 700мс. Эта задержка означает, что переход начнется посреди перехода абзаца. Затем делаем финальную пару переходов цвета и фона с той же скоростью, но уже без задержки. Это будет работать при проведении мышью над тэгом – тот изменит фон и цвет текста.

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

Автор: Thomas Hardy

Источник: //www.netmagazine.com/

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

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

Комментарии (2)