CSS переходи, трансформації і анімації – картка-перевертиш

41

Від автора: В цій статті з серії статей, присвячених CSS переходах, трансформацій і анимациям, ми розглянемо, як створити «картку-перевертиш», що містить контент на лицьовій і зворотній стороні.

CSS переходи, трансформації і анімації – картка-перевертишCSS переходи, трансформації і анімації – картка-перевертиш

Це перша частина з серії навчальних статей, присвячених практичному застосуванню CSS переходів, трансформацій і анімацій. У цієї навчальної статті ми дізнаємося, як створюється «картка-перевертиш» і де вона може застосовуватися.

Картка-перевертиш

В даний час «картки-перевертиши» або, по-іншому, перевертаються картки/зображення можуть бути дуже корисними. В першу чергу вони додають інтерактивності при роботі користувачів з сайтом/додатком, підтримують їх інтерес, а інтерес зараз має ключове значення. Найбільш поширений випадок застосування «карток-перевертнів», який приходить в голову, полягає у розміщенні яких-небудь зображень спереду і який-небудь інформації ззаду. Нам точно знадобляться два різних блоку-обгортки для елемента, які будуть поміщені всередині батьківського елемента. Елементи ви можете вибрати на свій розсуд. В рамках даної статті я буду використовувати загальні елементи div. Спочатку давайте дізнаємося, які три ефекту ми збираємося застосувати:

При наведенні – перехід (перевертання картки) відбувається, коли користувач наводить вказівник миші на картку.

При кліці – перехід (перевертання картки) відбувається, коли користувач клікає по картці.

Випадковий вибір – картки самі перевертаються у випадковому порядку.

А тепер давайте розбиратися.

Розмітка

Як вже було сказано вище, розмітка, в основному, складається з батьківської і двох дочірніх елементів. Кожний дочірній елемент є лицьовою, або зворотною стороною картки. Ось розмітка, яка буде використовуватися для кожної картки:

front
back

Зверніть увагу на слово «EFFECT», що міститься у класі батьківського елемента. Замість нього будуть підставлятися значення hover, click або random залежно від ефекту, який ми хочемо отримати. Тепер давайте обговоримо макет, CSS стилі, які нам знадобляться, і наявні властивості, які ми можемо використовувати.

Як добитися того, чого ми хочемо

Для того щоб отримати ефективну анімацію/перехід у «картки-перевертыша», потрібно щоб елемент, що є лицьовою стороною, спочатку перебував на елемент, що є зворотною стороною. Зворотний бік картки повинна бути спочатку прихована. У момент переходу лицьова і зворотна сторони картки повинні одночасно повернутися навколо осі Y. CSS трансформації можуть відбуватися у всіх трьох, відомих нам, вимірах. Якщо ви дивитеся на екран свого комп’ютера, спробуйте розташувати уявну точку прямо в центрі екрану. Осі розташовуються в наступному порядку:

Вісь X спрямована від даної крапки по горизонталі

Вісь Y: спрямована вгору від даної точки

Вісь Z: спрямована від даної точки на екран

Обертання елемента навколо осей X або Y дозволить нам досягти бажаного результату, але в даній статті ми розглянемо тільки обертання навколо осі Y.

Щоб розташувати картки, нам знадобиться застосувати абсолютне позиціонування. А щоб вони знаходилися в межах батьківського елемента, нам потрібно застосувати відносне позиціонування. З урахуванням цього нам потрібно явно вказати ширину і висоту для карток або, принаймні, щоб розміри однієї картки залежали від розмірів деякого медіа-контенту (наприклад, зображення). У разі якщо розміри картки будуть задані використаним зображенням, потрібно буде задати абсолютне позиціонування тільки для однієї з карток.

Ще слід звернути увагу на те, що якщо при створенні карток ми використовуємо властивість прозорості (наприклад, не суцільний фон, зображення з прозорим фоном або напівпрозорі кольору), нам потрібно буде приховати зворотний бік карток, щоб інша сторона не була видна. Для цього ми будемо використовувати CSS властивість backface-visiblity у значенні hidden. І, нарешті, я буду використовувати спеціальну техніку застосування властивості padding для батьківського елемента, щоб зробити картки ідеально квадратними.

Базові CSS стилі

Давайте розглянемо базові CSS-стилі, що застосовуються для всіх трьох варіантів:

.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.3 s;
transition: transform 0.3 s;
}
.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:

.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 стилі:

.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:

(function() {
var cards = document.querySelectorAll(«.card.effect__click»);
for ( var i = 0, len = cards.length; i < len; i++ ) {
var card = cards;
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» в нашій розмітці. Ось сама розмітка:

front
back

CSS-стилі будуть майже такими ж, як і в попередніх прикладах, але тим не менш:

.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 код:

(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;
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 переходів та перетворень, а також розглянули реальний приклад їх застосування на практиці. Пам’ятайте про те, що ви можете подивитися демо-приклад і завантажити вихідні коди, клікнувши за наведеними посиланнями. А якщо у вас є питання, зауваження чи побажання, напишіть про це в коментарях.