От автора: несколько уроков по созданию hover эффектов на чистом CSS, привязанных к направлению курсора. Уроки предназначены для тех, кто имеет хотя бы базовые знания HTML и на продвинутом уровне знают CSS/SASS.
Дисклеймер
Эффекты не работают в старых браузерах, для их работы нужен браузер с возможностью рендеринга 3D трансформаций. Я проверял эффекты в последних версиях браузеров Chrome, Firefox и Safari.
Также я использую замечательную библиотеку AutoPrefixer для автоматической подстановки вендорных префиксов. Зайдите в настройки CodePen на вкладку CSS и выберите AutoPrefixer.
Эффект hover с параллаксом
Введение
Мы с моим дизайнером наткнулись на домашнюю страницу сайта Kikk Festival еще в 2015 году, на ней были реализованы карточки с параллакс эффектом при наведении курсора. Нам понравилось, и мы захотели воссоздать такой эффект в своем проекте. Однако из-за особенностей кода мы не могли использовать JS. Я начал рыскать в поисках решений на чистом CSS и нашел кое-что интересное.
Всемогущая тильда
Один из самых любимых моих селекторов в CSS – тильда (~), которая выбирает ближайший элемент, подходящий под селектор, но расположенный после первого элемента. Например, ul ~ p выберет элементы p в коде ниже:
|
1 2 3 4 5 6 |
<div> <ul></ul> <ol></ol> <p></p> <p></p> </div> |
Я понял, что это можно использовать для создания hover эффектов с учетом направления курсора практически для чего угодно!
Структура
Структура ссылок довольно проста – контейнер с набором тегов <a> и контейнер для контента карточки. Во всех атрибутах href должен быть один URL.
|
1 2 3 4 5 6 7 8 9 |
<div class="container"> <a href="//gabriellew.ee"></a> <a href="//gabriellew.ee"></a> <a href="//gabriellew.ee"></a> <a href="//gabriellew.ee"></a> <div class="card"> <h1>Content</h1> </div> </div> |
Добавим немного SASS/CSS, чтобы расположить все ссылки по углам карточки. Можно сделать больше ссылок, но для простоты возьмем четыре. Для ускорения процесса будем использовать Haml.
Так как у нас нет JS, который бы нас предупреждал о направлении движения мыши и положении курсора, мы будем использовать ссылки <a> для разделения карточки на зоны обнаружения. Если, например, курсор попадет на ссылку <a> №1 сверху, то мышь попадает в зону обнаружения №1 до захода в №3 и №4.
Эффект hover
Следующий этап – присвоить каждой ссылке событие, чтобы она влияла на карточку. Вот тут нам и поможет тильда.
|
1 2 3 4 5 6 7 |
a { &:hover, &:focus { ~ .card { // CSS код } } } |
Карточка будет меняться при наведении курсора на любую ссылку, в отличие от селектора +, который выбирает только ближние смежные элементы.
Далее необходимо добавить уникальный эффект hover для каждой ссылки. Я поменял фон ссылок на такой же, как у соответствующих рамок, чтобы было проще понять эффект.
Трансформации
Углы определяются правильно, теперь мы добавим трансформации, которые будут наклонять карточку по углам. Первым делом необходимо добавить перспективу к контейнеру. Я обычно использую что-то в районе 1000px, чтобы можно было показать легкую глубину.
Для параллакса такого вида самым важным свойством будет не transform, а transform-origin, наложенное на карточку. Оно должно меняться для всех зон обнаружения и присваиваться к противоположному углу от текущей зоны обнаружения.
Например, если мы заходим в зону обнаружения №1 (верх лево), transform-origin должно быть bottom right, т.е. противоположный угол. Суть такая – затронутый угол должен двигаться от нас, а остальные углы к нам.
Последние штрихи
В завершении нашего параллакс эффекта добавим рамку в карточку, которая будет также изгибаться при наведении курсора на ссылку. Эту технику можно применить к другим элементам в карточке.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
// стили рамки .card { position: relative; .border { transform-origin: center center; position: absolute; top: 12px; left: 12px; width: calc(100% - 24px); height: calc(100% - 24px); border: 2px solid white; } } // параллакс эффект .container { a { &:hover, &:focus { ~ .card { .border { transform: translateZ(24px); } } } // толкаем рамку назад по клику &:active { ~ .card { .border { transform: none; } } } } } |
Осталось (1) добавить transition к карточке, чтобы сгладить переход по углам, и (2) удалить стили ссылок, чтобы они были не видны. Я люблю ставить opacity в 0 во избежание казусов. Чтобы избежать перекрытия из-за поворотов карточки, я также двигаю ссылку, на которую наведен курсор, вперед.
Результат
Ниже показана завершенная версия параллакс эффекта при наведении на CodePen. Переключите чекбокс, чтобы увидеть расположение ссылок. Для улучшения параллакс эффекта я решил добавить еще немного ссылок.
Эффект hover на примере куба
Введение
Adult Swim Singles 2016 – еще один сайт с впечатляющим эффектом наведения с учетом направления курсора. По клику на иконку календаря в левом верхнем углу открывается 3D календарь, где каждый день представлен в виде куба, который поворачивается в зависимости от направления курсора. Замечательная идея!
Я сразу понял, что похожий эффект можно сделать с помощью тильды. У меня уже была форма куба, которую я мог с легкостью изменить под ссылки и параллакс эффект наведения.
Основа
Главное отличие куба со ссылками и параллакс эффекта в формате зон обнаружения. Вместо углов мы используем стороны/грани зон обнаружения. Четыре треугольника вместо четырех квадратов.
Теперь можно приступить к созданию основы куба со ссылками. Нужно создать внешний контейнер, четыре треугольника, которые будут собираться в квадрат, и один внутренний контейнер с шестью элементами – четыре пустых и два с контентом. Мне нравится такой порядок: верх, низ, лево, право, перед, зад.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="link"> <a href="//codepen.io/gabriellewee/"></a> <a href="//codepen.io/gabriellewee/"></a> <a href="//codepen.io/gabriellewee/"></a> <a href="//codepen.io/gabriellewee/"></a> <div class="cube"> <div></div> <div></div> <div></div> <div></div> <div>Front content</div> <div>Back content</div> </div> </div> |
Для создания треугольных ссылок можно использовать Clippy. Для совместимости с Firefox вам также нужен SVG clip-path. Ссылки должны иметь положительное значение translateZ (быть выдвинутыми на передний план), иначе они спрячутся за кубом.
Для определения ширины, высоты и трансформаций для куба мы используем переменную со значением 12px. Чтобы отличать стороны куба, мы используем разные оттенки одного цвета для симуляции освещения. Задняя сторона полностью белая.
Мы слегка повернули куб, чтобы вы могли посмотреть, что все стороны правильно расположены. Если посмотреть на transform, видно, что все стороны куба имеют отрицательное значение translateZ. То есть все стороны кроме передней находятся на заднем плане.
Природа 3D трансформаций такова, что если не передвинуть весь куб вперед, то часть его может быть отрезана задним фоном. Можете передвинуть куб вперед, чтобы у вас не было этой проблемы. Так как у меня уже был куб, я почти его не трогал. Пишите в комментариях, если у вас возникли сложности с созданием куба.
Эффект hover
Далее необходимо добавить поворот по наведению курсора. Эффект можно стилизовать как угодно, но самый реалистичный метод, который я нашел, привязан к мыши. Если мышь заходит на куб слева, куб должен повернуться слева направо. Все повороты должны быть 180deg/0.5turn или отрицательные эквиваленты. Также добавим transition, чтобы куб вращался правильно.
Полировка
Нужно отполировать две вещи:
Нижний треугольник переворачивает задний текст вверх ногами.
Hover слишком чувствительный: переход между треугольниками вызывает лишние повороты.
С текстом самый простой способ – повернуть заднюю сторону вправо без плавных переходов до основного поворота. По каким-то причинам изменение нижнего треугольника затрагивает и верхний. Поэтому нужно добавить дополнительный поворот для обоих hover эффектов.
Чувствительность hover эффектов пофиксить было сложнее. Решение заключается в том, чтобы текущая ссылка занимала все пространство трех других ссылок (полная ширина/высота, удаляем clip-path, двигаем вперед), но тогда пропадает интересный угловой эффект (когда быстро проводишь мышью по кривой над кубом). В конце концов, я решил проблему – я поставил задержку на transition так, чтобы фикс не срабатывал, если курсор на кубе не задержался более секунды. Задержка не убирает все проблемы, но смягчает большую часть.
Результат
CodePen ниже – моя завершенная опубликованная версия с цветами и иконками. Концепции в этом проекте были сложнее, но закончил его быстрее, чем параллакс эффект, так как тут я использовал знания, полученные из первого проекта.
Заключение
Столько много интересных эффектов hover можно создать с помощью тильды, трансформаций и плавных переходов. Мой дизайнер предложил идею создать аквариум, в котором рыбка плавала бы в противоположную сторону от курсора. Можно создать эффект пульсации воды, можно поворачивать изображения со сдвигом, а также создавать анимацию с размытием в движении. Пишите в комментариях, если вы уже использовали эту технику!
Автор: Gabrielle Wee
Источник: //codepen.io/
Редакция: Команда webformyself.
