Эффект переворота карточек при наведении

Добавляет эффект переворота карточек при наведении, клике или нажатии на определенную кнопку

Инструкция по установке

1

Cкопируйте код ниже и вставьте его внутрь <head> в настройках сайта

Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг.

<script src="https://cdn.jsdelivr.net/gh/postnikovmd/tilda@1.2/mods.min.js"></script>

1
2

Создайте Zero-блок и добавьте в него карточки, которые будут переворачиваться (переднюю и заднюю сторону)
3

Объедините элементы карточек в группы: создайте группу с типом Object для передней и для задней стороны карточки
4

Задайте любому шейпу внутри каждой передней карточки класс .uc-flip, и аналогично, внутри каждой задней карточки – класс .uc-flip-back

Первой передней карточке, содержащей шейп с классом .uc-flip, будет соотвествовать первая задняя карточка, содержащая шейп с классом .uc-flip-back. Если карточки перемешались, скопируйте, удалите и вставьте поочерёдно каждую группу объектов.

Если вы планируете использовать на странице несколько блоков с таким эффектом, задайте карточкам в каждом блоке разные классы, например, .uc-flip1, .uc-flip1-back, .uc-flip2, .uc-flip2-back и т.д.
5

Задайте в настройках модификации поведение карточек и параметры их анимации
6

Скопируйте код и вставьте его в блок T123 в конец страницы

Как это сделано?

<script>flip.init(".uc-flip")</script>

Открыть пример

Видео скоро появится…

Настройки модификации

Класс карточек:

Только по клику:

Скорость и тип переходов:

Ссылка для переворота:

Если включено, карточки будут переворачиваться только по клику на кнопку переворота или на них самих

Задайте определенную ссылку, чтобы карточки переворачивались только по клику на неё.

Если оставить пустым, карточки будут переворачиваться по клику на самих себя.