Модификация находится в бета-версии. Если нашли ошибку, сообщите о ней здесь
Эффект переворота карточек при наведении
Добавляет эффект переворота карточек при наведении, клике или нажатии на определенную кнопку
Инструкция по установке
- 1Cкопируйте код ниже и вставьте его внутрь <head> в настройках сайтаЭтот код устанавливается только один раз. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг.
<script src="https://cdn.jsdelivr.net/gh/postnikovmd/tilda@1.0.5/flip.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>© 2024 Максим Постников. Все права защищены.
Обо мне
Проекты
Блог
Связаться
Модификации
Максим Постников
Столкнулись с ошибкой?
Расскажите подробнее о проблеме, при которой модификация не работает или работает неправильно
Расскажите подробнее о проблеме, при которой модификация работает неправильно
Сообщение отправлено
Спасибо за обращение! Мы провалидируем ошибку и исправим её в ближайшее время
Нравятся модификации?
Поделитесь впечатлениями от работы с библиотекой — обратная связь поможет нам стать лучше
Поделитесь впечатлениями о сервисе — обратная связь поможет нам стать лучше
Сообщение отправлено
Спасибо, что делитесь с нами! Это помогает нам развиваться и улучшать сервис