От автора: Сегодня мы покажем вам, как создать простые, но стильные эффекты проведения мышью для титров к изображениям. Идея заключается в том, чтобы сделать сетку с изображениями и применить к ним эффекты, которые при проведении мышью покажут титры с названием, автором и кнопкой-ссылкой. Для некоторых эффектов мы применим 3D-преобразования. Нам нужно добиться изящества и гарантировать вдохновение при создании множества их вариаций.
Пожалуйста, заметьте: это работает как полагается только в тех браузерах, которые поддерживают соответствующие свойства CSS.
РАЗМЕТКА
Структура нашей сетки и рисунки будут сделаны из неупорядоченного списка, и в каждом будет находиться элемент figure. В figure содержится изображение и figcaption с текстовыми элементами и ссылкой:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<ul class="grid cs-style-1"> <li> <figure> <img src="images/1.png" alt="img01"> <figcaption> <h3>Camera</h3> <span>Jacob Cummings</span> <a href="//dribbble.com/shots/1115632-Camera">Take a look</a> </figcaption> </figure> </li> <li> <figure> <!-- ... --> </figure> </li> <!-- ... --> </ul> |
Пожалуйста, обратите внимание, что применять figure имеет смысл, только если в нем самом нет содержимого, но на него делается ссылка из основного потока документа и его можно убрать (например, в приложение). Прочтите подробнее об элементе figure в этой великолепной статье HTML5 Doctor: Элементы figure & figcaption.
Это – структура по умолчанию для любых образцов сетки. Заметьте, что для Эффекта 4 мы обернем изображение в дополнительный div.
Класс каждого отдельного эффекта будет добавлен в список; т.е. у примера 1 будет cs-style-1, у примера 2 — cs-style-2 и так далее. Именно так будут назначаться стили эффекта каждого примера по отдельности.
Но сначала давайте определим общие стили для всех эффектов.
CSS
Обратите внимание, что CSS не содержит вендорных префиксов, но вы обнаружите их в файлах.
Общие стили всех рисунков следующие: для начала мы определяем стили сетки и пунктов списка, которые послужат нам контейнерами для рисунков:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.grid { padding: 20px 20px 100px 20px; max-width: 1300px; margin: 0 auto; list-style: none; text-align: center; } .grid li { display: inline-block; width: 440px; margin: 0; padding: 20px; text-align: left; position: relative; } |
Отображение элементов списка как встроенных блоков позволяет нам выравнивать их путем применения к их родительскому элементу центрированного выравнивания текста.
Давайте сбросим поля элементов figure и установим position на relative. Наш figcaption будет позиционирован абсолютно, поэтому нам нужно убедиться, что он и останется таковым внутри figure:
1 2 3 4 |
.grid figure { margin: 0; position: relative; } |
Максимальная ширина изображения будет 100%, что пригодится нам при назначении медиазапроса для изменения размера элементов списка:
1 2 3 4 5 |
.grid figure img { max-width: 100%; display: block; position: relative; } |
figcaption будет позиционирован абсолютно. По умолчанию он станет находиться в верхнем левом углу. Здесь мы не станем назначать ширину или высоту, так как проделаем это во всех отдельных стилях:
1 2 3 4 5 6 7 8 |
.grid figcaption { position: absolute; top: 0; left: 0; padding: 20px; background: #2c3f52; color: #ed4e6e; } |
И наконец, определим некоторые стили элементов текста и ссылки:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.grid figcaption h3 { margin: 0; padding: 0; color: #fff; } .grid figcaption span:before { content: 'by '; } .grid figcaption a { text-align: center; padding: 5px 10px; border-radius: 2px; display: inline-block; background: #ed4e6e; color: #fff; } |
Добавим by к диапазону, содержащему имя автора, с помощью псевдокласса :before. Конечно, можно добавить его и в HTML, но так вы получите возможность легко менять его на нечто вроде made by или Designer: или что-нибудь подобное. Сделав что-нибудь подобное, смотрите не удалите значение из своего HTML. В конце CSS мы также добавим медиазапрос для маленьких экранов:
1 2 3 4 5 6 7 8 9 |
@media screen and (max-width: 31.5em) { .grid { padding: 10px 10px 100px 10px; } .grid li { width: 100%; min-width: 300px; } } |
А теперь примемся за сами эффекты.
Обратите внимание, что для определения касания мы пользуемся Modernizr’ом. Но помните, что при тестировании он надежен не на 100%, если вы пользуетесь сенсорным устройством, как показано здесь. Мы заменим проведение мышью на касание и добавим класс, который станет запускать эффекты при определении сенсора. Так, в дополнение к :hover вы всегда будете видеть еще одно правило. Нам нужно запускать эффект проведения мышью только тогда, когда мы не определили касания.
ЭФФЕКТ 1
Начнем с очень простого эффекта. Нам нужно, чтобы титр появлялся и чуть-чуть смещался вправо вниз, создавая впечатление 3D-слоя, выходящего из-под изображения.
Для этого нам сначала нужно определить ширину и высоту figcaption и установить исходную непрозрачность на 0:
1 2 3 4 5 6 7 8 |
.cs-style-1 figcaption { height: 100%; width: 100%; opacity: 0; text-align: center; backface-visibility: hidden; transition: transform 0.3s, opacity 0.3s; } |
Кроме того, мы добавляем переход и устанавливаем backface-visibility на hidden для того, чтобы избежать «подпрыгивания» отображения текста в конце перехода. Если вы не против небольшого сбоя, то можете этого и не делать.
При проведении мышью (или касании) мы установим непрозрачность на 1 и немного преобразуем figcaption:
1 2 3 4 5 |
.no-touch .cs-style-1 figure:hover figcaption, .cs-style-1 figure.cs-hover figcaption { opacity: 1; transform: translate(15px, 15px); } |
К тому же позиционируем элементы текста:
1 2 3 4 5 6 7 8 9 10 11 |
.cs-style-1 figcaption h3 { margin-top: 70px; } .cs-style-1 figcaption span { display: block; } .cs-style-1 figcaption a { margin-top: 30px; } |
ЭФФЕКТ 2
Этот эффект сдвигает изображение кверху и открывает figcaption, как на сайте Minimamente, где мы его и подсмотрели.
Итак, давайте добавим переход преобразования к изображению и заставим его смещаться вверх при проведении мышью:
1 2 3 4 5 6 7 8 9 |
.cs-style-2 figure img { z-index: 10; transition: transform 0.4s; } .no-touch .cs-style-2 figure:hover img, .cs-style-2 figure.cs-hover img { transform: translateY(-90px); } |
Мы установили z-index на 10 для того, чтобы изображение оставалось сверху титра. Для figcaption требуется высота и ширина в 100%. Мы прикрепим титр к низу рисунка:
1 2 3 4 5 6 |
.cs-style-2 figcaption { height: 90px; width: 100%; top: auto; bottom: 0; } |
А также позиционируем кнопку-ссылку по правой стороне:
1 2 3 4 5 |
.cs-style-2 figcaption a { position: absolute; right: 20px; top: 30px; } |
ЭФФЕКТ 3
По-иному создать эффект 2 можно, скрыв любое переполнение при перемещении изображения. Давайте попробуем это сделать и заставим его появляться так, как будто титр слегка подталкивает изображение кверху.
Во-первых, нам нужно установить overflow figure на hidden. Сделав это, мы не будем видеть ничего, что выходит за рамки:
1 2 3 |
.cs-style-3 figure { overflow: hidden; } |
Изображению для преобразования требуется переход и при проведении мышью мы переведем его на 50px выше:
1 2 3 4 5 6 7 8 |
.cs-style-3 figure img { transition: transform 0.4s; } .no-touch .cs-style-3 figure:hover img, .cs-style-3 figure.cs-hover img { transform: translateY(-50px); } |
figcaption будет чуть выше, чем в предыдущем примере, а также мы переместим его из поля зрения figure. Также добавим переход для преобразования и непрозрачности:
1 2 3 4 5 6 7 8 9 |
.cs-style-3 figcaption { height: 100px; width: 100%; top: auto; bottom: 0; opacity: 0; transform: translateY(100%); transition: transform 0.4s, opacity 0.1s 0.3s; } |
При проведении мышью установим непрозрачность на 1 и переместим ее вверх. Видите, как мы добавили два перехода? Один для обычного состояния, и второй для состояния при проведении мышью? Вот так можно контролировать, что происходит при наведении мыши на элемент и отведении ее в сторону. Здесь переход будет применяться при проведении мышью: нам нужно, чтобы элемент быстро становился непрозрачным и преобразование при этом происходило за 0,4 секунды. При отведении мыши с элемента непрозрачность снова становится равной 0, но лишь после задержки в 0,3 секунды. Таким образом, эффект будет смотреться последовательно и естественно.
1 2 3 4 5 6 |
.no-touch .cs-style-3 figure:hover figcaption, .cs-style-3 figure.cs-hover figcaption { opacity: 1; transform: translateY(0px); transition: transform 0.4s, opacity 0.1s; } |
И не забудем кнопку-ссылку:
1 2 3 4 5 |
.cs-style-3 figcaption a { position: absolute; bottom: 20px; right: 20px; } |
ЭФФЕКТ 4
В четвертом эффекте применяются некоторые 3D-свойства. Наша цель – титр – должен появляться слева и смещать изображение вправо. Мы используем пункт списка в качестве контейнера для изображения с перспективой с тем, чтобы можно было поэкспериментировать с 3D-преобразованиями:
1 2 3 4 |
.cs-style-4 li { perspective: 1700px; perspective-origin: 0 50%; } |
Чтобы 3D-преобразования работали с остальными элементами, дочернему элементу потребуется следующий transform-style:
1 2 3 |
.cs-style-4 figure { transform-style: preserve-3d; } |
Как уже упоминалось выше, в этом примере нужен другой упаковщик изображения. Зачем? Нам требуется установить родительский элемент изображения на overflow:hidden, потому что нельзя, чтобы изображение «переливалось» за края контейнера при его перемещении. Можно было бы установить на overflow:hidden figure, но тогда мы не увидим красивый 3D-эффект титра. Поэтому давайте добавим другой упаковщик и установим его на overflow hidden:
1 2 3 |
.cs-style-4 figure > div { overflow: hidden; } |
При наведении мыши сместим изображение:
1 2 3 4 5 6 7 8 |
.cs-style-4 figure img { transition: transform 0.4s; } .no-touch .cs-style-4 figure:hover img, .cs-style-4 figure.cs-hover img { transform: translateX(25%); } |
У figcaption будет половина ширины figure и мы установим его исходную непрозрачность на 0. Теперь перевернем его на 90 градусов по оси Y, отчего он станет появляться ближе к нам при исходном титре слева. Мы в основном его таким видеть не будем. Давайте установим переход для состояния убранной мыши, который будет работать по такому же принципу, что и описанный в предыдущем примере:
1 2 3 4 5 6 7 8 9 |
.cs-style-4 figcaption { height: 100%; width: 50%; opacity: 0; backface-visibility: hidden; transform-origin: 0 0; transform: rotateY(-90deg); transition: transform 0.4s, opacity 0.1s 0.3s; } |
При проведении мышью покажем его и перевернем на 0 градусов, при этом заставив его появиться как книжная страница – слева:
1 2 3 4 5 6 |
.no-touch .cs-style-4 figure:hover figcaption, .cs-style-4 figure.cs-hover figcaption { opacity: 1; transform: rotateY(0deg); transition: transform 0.4s, opacity 0.1s; } |
И последнее, но не менее важное – наша кнопка-ссылка:
1 2 3 4 5 |
.cs-style-4 figcaption a { position: absolute; bottom: 20px; right: 20px; } |
ЭФФЕКТ 5
В этом эффекте изображение уменьшается, а титр появляется из-за него. Мы установим изображение поверх титра и добавим переход для преобразования:
1 2 3 4 |
.cs-style-5 figure img { z-index: 10; transition: transform 0.4s; } |
Нам нужно, чтобы при проведении мышью изображение уменьшалось:
1 2 3 4 |
.no-touch .cs-style-5 figure:hover img, .cs-style-5 figure.cs-hover img { transform: scale(0.4); } |
Титр изначально уменьшен до 0,7 и скрыт:
1 2 3 4 5 6 7 8 |
.cs-style-5 figcaption { height: 100%; width: 100%; opacity: 0; transform: scale(0.7); backface-visibility: hidden; transition: transform 0.4s, opacity 0.4s; } |
При наведении мыши мы увеличиваем и проявляем его:
1 2 3 4 5 |
.no-touch .cs-style-5 figure:hover figcaption, .cs-style-5 figure.cs-hover figcaption { transform: scale(1); opacity: 1; } |
Очень легко. Да, и конечно же, кнопка-ссылка будет в нижнем правом углу:
1 2 3 4 5 |
.cs-style-5 figure a { position: absolute; bottom: 20px; right: 20px; } |
ЭФФЕКТ 6
Это – разновидность эффекта 5. У него множество вариаций; можно подумать о том, чтобы расположить изображение в другом месте и показать чуть больше текста. При этом эффекте текст и изображение располагаются не там, где ранее, и мы не станем проявлять титр или масштабировать его, он уже находится где нужно, создавая другое «окружение». Итак, давайте проделаем с изображением то же самое, а при проведении мышью всего лишь слегка переместим его:
1 2 3 4 5 6 7 8 9 |
.cs-style-6 figure img { z-index: 10; transition: transform 0.4s; } .no-touch .cs-style-6 figure:hover img, .cs-style-6 figure.cs-hover img { transform: translateY(-50px) scale(0.5); } |
На этот раз переход титра такой:
1 2 3 4 |
.cs-style-6 figcaption { height: 100%; width: 100%; } |
И разместим элементы текста:
1 2 3 4 5 6 7 8 9 |
.cs-style-6 figcaption h3 { margin-top: 60%; } .cs-style-6 figcaption a { position: absolute; bottom: 20px; right: 20px; } |
ЭФФЕКТ 7
В последнем эффекте, описанном в этом учебнике, титр будет «вырастать» из-за изображения, которое из-за этого станет смотреться как рамка. Так как рамка первых элементов будет перекрывать прочие элементы списка, нам требуется убедиться, что z-индексы у нас правильные (реверсированные):
1 2 3 4 5 6 |
.cs-style-7 li:first-child { z-index: 6; } .cs-style-7 li:nth-child(2) { z-index: 5; } .cs-style-7 li:nth-child(3) { z-index: 4; } .cs-style-7 li:nth-child(4) { z-index: 3; } .cs-style-7 li:nth-child(5) { z-index: 2; } .cs-style-7 li:nth-child(6) { z-index: 1; } |
Как и в предыдущем примере, требуется, чтобы изображение было поверх титра:
1 2 3 |
.cs-style-7 figure img { z-index: 10; } |
Титр будет занимать 100% фигуры и мы установим переход для непрозрачности, высоты и тени блока. Зачем нам тень блока? Ведь можно легко применить тень блока для создания рамки вокруг титра:
1 2 3 4 5 6 7 8 |
.cs-style-7 figcaption { height: 100%; width: 100%; opacity: 0; backface-visibility: hidden; box-shadow: 0 0 0 0px #2c3f52; transition: opacity 0.3s, height 0.3s, box-shadow 0.3s; } |
При проведении мышью мы установим непрозрачность на 1, увеличим высоту и установим ширину тени блока на 10 пикселей:
1 2 3 4 5 6 |
.no-touch .cs-style-7 figure:hover figcaption, .cs-style-7 figure.cs-hover figcaption { opacity: 1; height: 130%; box-shadow: 0 0 0 10px #2c3f52; } |
Теперь разместим элементы текста. Нам нужно, чтобы элементы появлялись сразу после анимации высоты титра, но при отведении мыши от них требуется тут же исчезнуть. Поэтому мы установим длительность перехода в обычном состоянии на 0 секунд.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.cs-style-7 figcaption h3 { margin-top: 86%; } .cs-style-7 figcaption h3, .cs-style-7 figcaption span, .cs-style-7 figcaption a { opacity: 0; transition: opacity 0s; } .cs-style-7 figcaption a { position: absolute; bottom: 20px; right: 20px; } |
При проведении мышью элементы будут появляться с задержкой:
1 2 3 4 5 6 7 8 9 |
.no-touch .cs-style-7 figure:hover figcaption h3, .no-touch .cs-style-7 figure:hover figcaption span, .no-touch .cs-style-7 figure:hover figcaption a, .cs-style-7 figure.cs-hover figcaption h3, .cs-style-7 figure.cs-hover figcaption span, .cs-style-7 figure.cs-hover figcaption a { transition: opacity 0.3s 0.2s; opacity: 1; } |
Вот и все! Надеюсь, что вам понравился этот учебник и вдохновил вас на создание множества классных титровых эффектов при проведении мышью.
Автор: Mary Lou
Источник: //tympanus.net/
Редакция: Команда webformyself.