+16

Время настройки: 5 минут

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

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

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

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

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

<script src="https://cdn.postnikovmd.com/tilda@1.4/mods.min.js"></script>

Создайте Zero-блок и добавьте в него карточки, которые будут переворачиваться (переднюю и заднюю сторону)
Объедините элементы карточек в группы с типом Object и присвойте передним карточкам класс .uc-flip и задним карточкам класс .uc-flip-back

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

Первая карточка должна находиться в самом низу, а каждая следующая – на уровень выше. Первой передней карточке будет соответствовать первая задняя карточка. Задние карточки должны располагаться позади передних. См. пример
Задайте в настройках модификации поведение карточек и параметры их анимации
Скопируйте код и вставьте его в блок T123 в конец страницы

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

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

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

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

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

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

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

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

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

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

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

<!--flip.js Эффект переворота карточек. https://postnikovmd.com/mods/flip-->
<script>flip.init(".uc-flip")</script>

Скопировать код

Документация

Элементы

Параметры

Добавьте параметр ?showerrors в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению

Всё установили, но модификация не работает?

Попробовать

Чат для дизайнеров

Вместе всё получится

3 000+ человек

Присоединяйтесь ко мне в Telegram-канале!

Чтобы узнавать о новых модификациях и получать оперативную тех. поддержку

t.me/postnikovmds

Можете меня поблагодарить

Если у вас есть желание поблагодарить автора за работу, можете отправить любую сумму на развитие проекта

Присоединяйтесь ко мне в Telegram-канале!

Чтобы узнавать о новых модификациях и получать оперативную тех. поддержку

t.me/postnikovmds

Политика Конфиденциальности

+16

Максим Постников

hello@postnikovmd.com

Политика Конфиденциальности

Модификации

Сообщить об ошибке

Столкнулись с ошибкой?

Расскажите подробнее о проблеме, при которой модификация не работает или работает неправильно

Хотите получить ответ по проблеме? Напишите напрямую на почту hello@postnikovmd.com или в Telegram

Хотите получить ответ по проблеме? Напишите напрямую на на почту или в Telegram

Расскажите подробнее о проблеме, при которой модификация работает неправильно

Сообщение отправлено

Спасибо за обращение! Мы провалидируем ошибку и исправим её в ближайшее время

Поделитесь впечатлениями

Нравятся модификации?

Расскажите про опыт ваш работы с модификациями — обратная связь поможет сделать их ещё лучше!

Расскажите про ваш опыт работы с ними — обратная связь поможет сделать их лучше!

Сообщение отправлено

Спасибо, что делитесь с нами! Это помогает нам развиваться и улучшать сервис

Действия