В данном уроке я расскажу, как создать карточку, которая будет переворачиваться при наведении, открывая обратную сторону.
Описание
Видеоинструкция по подключению
Создаём новую страницу на сайте
Шаг 1
Скроллим в самый низ и нажимаем кнопку «Указать ID шаблона»
Шаг 2
В графе указываем номер шаблона (он указан в начале инструкции), нажимаем кнопку «Выбрать»
Шаг 3
Пошаговая инструкция с подключением кода
Первым делом я создал необходимые разрешения для отображения, т.к в автоскейле не представляется возможным создать такие карточки, из-за позиционирования. Я взял: 1900-max, 1440-1900, 1366-1440, 1200-1366, 960-1200, 640-960, 480-640, 320-480.
Шаг 1
Создаём две карточки, это будет лицевая сторона и задняя. В дальнейшем мы их объединим в единое целое. Всему содержимого лицевой стороны (всем элементам) присваиваем класс card-flip-content-face-1.
Шаг 2
Создаём содержимое второй карточки. Всему содержимому задней стороны присваиваем класс card-flip-content-back-1
Шаг 3
Создаём тех же размеров шейп, что и карточка. Это будет контейнер, который позволит объединить содержимое двух сторон в одно. Заливку убираем. Присваиваем класс card-flip-wrapper-main-1
Шаг 4
Объединяем карточки в группы и выравниваем по window-container по вверхней стороне с отступом слева в 100px (более подробно в видео). А вот шейп с классом card-flip-wrapper-main-1 куда хотите, ведь именно в него попадут обе стороны.
Шаг 5
Чтобы создать новую карточку, дублируем карточки и меняем порядковый номер. Пример: card-flip-wrapper-main-2, card-flip-content-face-2, card-flip-content-back-2
Шаг 6
<!--Двухсторонние 3d карточки
https://mt-webdesign.ru/flip-cards-->
<script>
$(document).ready(function() {
setTimeout(function() {
// Распределяем содержимое по карточке 1
$('.card-flip-content-back-1').wrapAll('<div class="card-flip-wrapper-back-1"></div>');
$('.card-flip-content-face-1').wrapAll('<div class="card-flip-wrapper-face-1"></div>');
$('.card-flip-wrapper-back-1, .card-flip-wrapper-face-1').appendTo('.card-flip-wrapper-main-1 .tn-atom');
// Распределяем содержимое по карточке 2
$('.card-flip-content-back-2').wrapAll('<div class="card-flip-wrapper-back-2"></div>');
$('.card-flip-content-face-2').wrapAll('<div class="card-flip-wrapper-face-2"></div>');
$('.card-flip-wrapper-back-2, .card-flip-wrapper-face-2').appendTo('.card-flip-wrapper-main-2 .tn-atom');
// Распределяем содержимое по карточке 3
$('.card-flip-content-back-3').wrapAll('<div class="card-flip-wrapper-back-3"></div>');
$('.card-flip-content-face-3').wrapAll('<div class="card-flip-wrapper-face-3"></div>');
$('.card-flip-wrapper-back-3, .card-flip-wrapper-face-3').appendTo('.card-flip-wrapper-main-3 .tn-atom');
}, 0);
});
</script>
<style>
/*Курсор палец*/
.card-flip-wrapper-main-1, .card-flip-wrapper-main-2, .card-flip-wrapper-main-3 {
cursor: pointer !important;
}
/*Содержимое карточек*/
.card-flip-wrapper-face-1, .card-flip-wrapper-back-1,
.card-flip-wrapper-face-2, .card-flip-wrapper-back-2,
.card-flip-wrapper-face-3, .card-flip-wrapper-back-3 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
}
.card-flip-content-face-1, .card-flip-content-back-1,
.card-flip-content-face-2, .card-flip-content-back-2,
.card-flip-content-face-3, .card-flip-content-back-3 {
zoom: 0 !important;
}
.card-flip-wrapper-back-1, .card-flip-wrapper-back-2, .card-flip-wrapper-back-3 {
transform: perspective(1500px) rotateY(-180deg);
transition: transform 1.2s cubic-bezier(.34,1.56,.64,1);
}
.card-flip-wrapper-face-1, .card-flip-wrapper-face-2, .card-flip-wrapper-face-3 {
transform: perspective(1500px) rotateY(0deg);
transition: transform 1.2s cubic-bezier(.34,1.56,.64,1);
}
.card-flip-wrapper-main-active .card-flip-wrapper-face-1,
.card-flip-wrapper-main-active-2 .card-flip-wrapper-face-2,
.card-flip-wrapper-main-active-3 .card-flip-wrapper-face-3 {
transform: perspective(1500px) rotateY(180deg);
}
.card-flip-wrapper-main-active .card-flip-wrapper-back-1,
.card-flip-wrapper-main-active-2 .card-flip-wrapper-back-2,
.card-flip-wrapper-main-active-3 .card-flip-wrapper-back-3 {
transform: perspective(1500px) rotateY(0deg);
}
</style>
<script>
$(document).ready(function () {
$('.card-flip-wrapper-main-1, .card-flip-wrapper-main-2, .card-flip-wrapper-main-3').removeClass('card-flip-wrapper-main-active');
// Карточка 1
// Переключаем состояние ховера на нажатие на разрешении ниже 480px
var mediaQuery = window.matchMedia('(min-width: 480px)');
function handleHover() {
$(this).toggleClass("card-flip-wrapper-main-active");
}
if (mediaQuery.matches) {
// Для разрешения 480px и выше
$(".card-flip-wrapper-main-1").hover(handleHover);
} else {
// Для разрешения ниже 480px
$(".card-flip-wrapper-main-1").on("click", handleHover);
}
// Карточка 2
// Переключаем состояние ховера на нажатие на разрешении ниже 480px
function handleHover2() {
$(this).toggleClass("card-flip-wrapper-main-active-2");
}
if (mediaQuery.matches) {
// Для разрешения 480px и выше
$(".card-flip-wrapper-main-2").hover(handleHover2);
} else {
// Для разрешения ниже 480px
$(".card-flip-wrapper-main-2").on("click", handleHover2);
}
// Карточка 3
// Переключаем состояние ховера на нажатие на разрешении ниже 480px
function handleHover3() {
$(this).toggleClass("card-flip-wrapper-main-active-3");
}
if (mediaQuery.matches) {
// Для разрешения 480px и выше
$(".card-flip-wrapper-main-3").hover(handleHover3);
} else {
// Для разрешения ниже 480px
$(".card-flip-wrapper-main-3").on("click", handleHover3);
}
});
</script>Более подробные настройки, возможности взаимодействия и подключение в видео
Другие модификации
