От автора: В этой статье из серии статей, посвященных CSS переходам, трансформациям и анимациям, мы рассмотрим, как создать «карточку-перевертыш», содержащую контент на лицевой и обратной стороне.
Это первая часть из серии обучающих статей, посвященных практическому применению CSS переходов, трансформаций и анимаций. В этой обучающей статье мы узнаем, как создается «карточка-перевертыш» и где она может применяться.
Карточка-перевертыш
В настоящее время «карточки-перевертыши» или, по-другому, переворачивающиеся карточки/изображения могут быть очень полезными. В первую очередь они добавляют интерактивности при работе пользователей с сайтом/приложением, поддерживают их интерес, а интерес сейчас имеет ключевое значение. Наиболее распространенный случай применения «карточек-перевертышей», который приходит в голову, заключается в размещении каких-нибудь изображений спереди и какой-нибудь информации сзади. Нам точно потребуются два разных блока-обертки для элемента, которые будут помещены внутри родительского элемента. Элементы вы можете выбрать на свое усмотрение. В рамках данной статьи я буду использовать общие элементы div. Сначала давайте узнаем, какие три эффекта мы собираемся применить:
При наведении – переход (переворачивание карточки) происходит, когда пользователь наводит указателем мыши на карточку.
При клике – переход (переворачивание карточки) происходит, когда пользователь, кликает по карточке.
Случайный выбор – карточки сами переворачиваются в случайном порядке.
А теперь давайте разбираться.
Разметка
Как уже было сказано выше, разметка, в основном, состоит из родительского и двух дочерних элементов. Каждый дочерний элемент является лицевой, либо обратной стороной карточки. Вот разметка, которая будет использоваться для каждой карточки:
|
1 2 3 4 5 6 7 8 |
<div class="card effect__EFFECT"> <div class="card__front"> <span class="card__text">front</span> </div> <div class="card__back"> <span class="card__text">back</span> </div> </div><!-- /card --> |
Обратите внимание на слово «EFFECT», содержащееся в классе родительского элемента. Вместо него будут подставляться значения hover, click или random в зависимости от эффекта, который мы хотим получить. Теперь давайте обсудим макет, CSS стили, которые нам понадобятся, и имеющиеся свойства, которые мы можем использовать.
Как добиться того, чего мы хотим
Для того чтобы получить эффективную анимацию/переход у «карточки-перевертыша», нужно чтобы элемент, являющийся лицевой стороной, изначально находился поверх элемента, являющегося обратной стороной. Обратная сторона карточки должна быть изначально скрыта. В момент перехода лицевая и обратная стороны карточки должны одновременно повернуться вокруг оси Y. CSS трансформации могут происходить во всех трех, известных нам, измерениях. Если вы смотрите на экран своего компьютера, попробуйте расположить воображаемую точку прямо в центре экрана. Оси располагаются в следующем порядке:
Ось X: направлена от данной точки по горизонтали
Ось Y: направлена вверх от данной точки
Ось Z: направлена от данной точки на экран
Вращения элемента вокруг осей X или Y позволит нам достичь желаемого результата, но в данной статье мы рассмотрим только вращение вокруг оси Y.
Чтобы расположить карточки, нам понадобится применить абсолютное позиционирование. А чтобы они находились в рамках родительского элемента, нам нужно применить относительное позиционирование. С учетом этого нам нужно явно указать ширину и высоту для карточек или, по крайней мере, чтобы размеры одной карточки зависели от размеров некоторого медиа-контента (например, изображения). В случае если размеры карточки будут заданы использованным изображением, нужно будет задать абсолютное позиционирование только для одной из карточек.
Еще следует обратить внимание на то, что если при создании карточек мы используем свойство прозрачности (например, не сплошной фон, изображения с прозрачным фоном или полупрозрачные цвета), нам нужно будет скрыть обратную сторону карточек, чтобы другая сторона не была видна. Для этого мы будем использовать CSS свойство backface-visiblity в значении hidden. И, наконец, я буду использовать специальную технику применения свойства padding для родительского элемента, чтобы сделать карточки идеально квадратными.
Базовые CSS стили
Давайте рассмотрим базовые CSS стили, которые применимы для всех трех вариантов:
|
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 34 |
.card { position: relative; float: left; padding-bottom: 25%; width: 25%; text-align: center; } .card__front, .card__back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .card__front, .card__back { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; } .card__front { background-color: #ff5078; } .card__back { background-color: #1e1e1e; -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } |
У меня будет расположено по четыре карточки в каждом ряду, т.е. ширина каждой будет равна 25%. Чтобы сделать контейнер карточки идеально квадратным, я также задам нижний отступ со значением 25%. Это позволит нам абсолютно спозиционировать лицевую и обратную стороны карточки, а остальной контент, расположенный ниже, будет следовать общему потоку документа. Также очень важным является свойство transition. Мы применяем свойство transition к свойству transform, т.к. изменения происходят именно за счет трансформаций. Обратная сторона карточки изначально будет поворачиваться на –180 градусов вокруг оси Y, а у лицевой стороны все остается, как было. Теперь давайте посмотрим на каждый вариант реализации «карточки-перевертыша» в отдельности.
Эффект №1 – Переход при наведении
Достичь этого эффекта легко. И мы можем использовать для этого CSS псевдо-класс :hover. Когда мы наводим указателем мыши на карточку, то для лицевой стороны должен быть выполнен переход на –180 градусов, а для обратной стороны — на 0. Вот как это выглядит в CSS:
|
1 2 3 4 5 6 7 8 9 |
.card.effect__hover:hover .card__front { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } .card.effect__hover:hover .card__back { -webkit-transform: rotateY(0); transform: rotateY(0); } |
Правда просто, не так ли? Переходим ко второму эффекту.
Эффект №2 – Переход при клике
На этот раз мы хотим, чтобы переход происходил при клике. Мы задействуем немного JavaScript кода, чтобы добиться этого, потому что нам нужно будет проверять классы и все остальное, чтобы убедиться, что мы можем обратно перевернуть карточку при повторном клике. Вот CSS стили:
|
1 2 3 4 5 6 7 8 9 |
.card.effect__click.flipped .card__front { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } .card.effect__click.flipped .card__back { -webkit-transform: rotateY(0); transform: rotateY(0); } |
А вот и JavaScript:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
(function() { var cards = document.querySelectorAll(".card.effect__click"); for ( var i = 0, len = cards.length; i < len; i++ ) { var card = cards[i]; clickListener( card ); } function clickListener(card) { card.addEventListener( "click", function() { var c = this.classList; c.contains("flipped") === true ? c.remove("flipped") : c.add("flipped"); }); } })(); |
Прекрасно! Давайте перейдем к третьему эффекту.
Эффект №3 – Переход возникает в случайном порядке
Этот эффект, можно сказать, рассматривается в качестве бонуса, и для него потребуются дополнительные действия. Поскольку мы собираемся случайным образом и в разное время вызывать переход, нам потребуется задать несколько временных лимитов (таймаутов) в JavaScript. Для этого мы будет также использовать некоторые атрибуты «data-» в нашей разметке. Вот сама разметка:
|
1 2 3 4 5 6 7 8 |
<div class="card effect__random" data-id="1"> <div class="card__front"> <span class="card__text">front</span> </div> <div class="card__back"> <span class="card__text">back</span> </div> </div><!-- /card --> |
CSS стили будут почти такими же, как и в предыдущих примерах, но тем не менее:
|
1 2 3 4 5 6 7 8 9 |
.card.effect__random.flipped .card__front { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } .card.effect__random.flipped .card__back { -webkit-transform: rotateY(0); transform: rotateY(0); } |
А теперь переходим к использованию искусного JavaScript. Я установил промежуток от 1 до 3 секунд, в результате чего будет генерироваться случайная задержка для переворачивания карточки. Временной лимит (таймаут) будет очищаться и каждый раз сбрасываться, создавая чисто визуальный эффект. Вот сам JavaScript код:
|
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 |
(function() { // переменные кэша var cards = document.querySelectorAll(".card.effect__random"); var timeMin = 1; var timeMax = 3; var timeouts = []; // цикл по карточкам for ( var i = 0, len = cards.length; i < len; i++ ) { var card = cards[i]; var cardID = card.getAttribute("data-id"); var id = "timeoutID" + cardID; var time = randomNum( timeMin, timeMax ) * 1000; cardsTimeout( id, time, card ); } // слушатель таймаута function cardsTimeout( id, time, card ) { if (id in timeouts) { clearTimeout(timeouts[id]); } timeouts[id] = setTimeout( function() { var c = card.classList; var newTime = randomNum( timeMin, timeMax ) * 1000; c.contains("flipped") === true ? c.remove("flipped") : c.add("flipped"); cardsTimeout( id, newTime, card ); }, time ); } // генератор случайного числа с указанием минимального и максимального значения function randomNum( min, max ) { return Math.random() * (max - min) + min; } })(); |
Вот такой забавный результат!
Карточки-перевертыши в действии
В Интернете можно найти множество сайтов, на которых применяются «карточки-перевертыши». В частности, я видел много галерей и портфолио, на которых используются разные вариации данной техники. Однако, этим дело не ограничивается. Недавно я создал HTML5 игру, тренирующую память, и мне очень пригодилась данная техника. Вы можете поиграть в нее вот здесь, а также можете посмотреть исходный код на GitHub.
Браузерная поддержка
В данной технике очень много используются CSS переходы и трансформации, что следует учесть при разработке вашего сайта или приложения. Библиотека Modernizr — это замечательный инструмент, определяющий поддержку тех или иных возможностей в браузерах. Поэтому данный инструмент способен предоставить подходящий запасной вариант для тех случаев, когда переходы/трансформации не поддерживаются некоторыми браузерами. Подумайте также об изменении значений у свойства z-index, в зависимости от того, какая из сторон карточки будет показана.
В заключение
Вот и конец статьи! В ней мы рассмотрели несколько важных возможностей, немного погрузились в мир CSS3 переходов и трансформаций, а также рассмотрели реальный пример их применения на практике. Помните о том, что вы можете посмотреть демо-пример и скачать исходники, кликнув по приведенным ссылкам. А если у вас есть вопросы, замечания или пожелания, напишите об этом в комментариях.
Автор: Nick Salloum
Источник: //callmenick.com/
Редакция: Команда webformyself.
Комментарии (1)