Подписка на библиотеку модификаций
pro
Получите доступ к расширенным настройкам, сценариям и возможностям сервиса
Оформить подписку

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

Добавляет эффект 3D-поворота карточек в Zero-блоке с настраиваемой анимацией

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

  • Cкопируйте код ниже и вставьте его внутрь <head> в настройках сайта
    Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг.
<script src="https://cdn.postnikovmd.com/tilda@1.6/mods.min.js"></script>
Скопировать код
Код скопирован!
Синхронизация обновлений включена. Новые версии и исправления будут устанавливаться автоматически.
Синхронизация обновлений включена. Модификации будут загружаться с альтернативного источника (для зарубежных проектов).
Синхронизация обновлений отключена. Текущая версия останется неизменной, независимо от обновлений.
  • Создайте Zero-блок и добавьте в него карточки, для которых будет применён эффект
  • Объедините элементы карточек в группы с типом Object и задайте каждой из них класс .uc-tilt
    Если вы планируете использовать на странице несколько блоков с таким эффектом, задайте карточкам в каждом блоке разные классы, например, .uc-tilt1, .uc-tilt2 и т. д.
  • Задайте в настройках модификации класс карточек и параметры их анимации
  • Скопируйте код и вставьте его в блок T123 в конец страницы
<script>tilt.init(".uc-tilt", { glare: true, rotate: 5 })</script>
Все примеры
93
Настройки модификации

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

Класс карточек
Скорость поворота
Макс. угол поворота
Чем больше значение, тем сильнее вращается карточка
+ Настройки анимации
Блики при повороте
Яркость бликов
Перспектива трансформации
Настройки анимации
Чем больше значение, тем ярче становятся блики по краям карточек
Если включить, при повороте края карточек будут становиться светлее
Чем меньше значение, тем сильнее трансформируются карточки при наведении
<!--tilt.js Эффект 3D-поворота карточек. https://postnikovmd.com/mods/tilt-->
<script>tilt.init(".uc-tilt")</script>
Скопировать код
Скопировать код
Код скопирован!

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

Параметры

Если при установке что-то пошло не так

Добавьте параметр ?showerrors в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению
Смотрите также
все модификации
t.me/postnikovmds
Присоединяйтесь к авторскому Telegram-каналу
Всё о возможностях библиотеки, модификациях и личном опыте
1K подписчиков
Присоединяйтесь к Telegram-каналу
Всё о возможностях библиотеки, новых модификациях и личном опыте
Перейти
t.me/postnikovmds
Чат авторского канала о модификациях
Делимся опытом, обсуждаем обновления, возможности и архитектуру модов
Пригласительная ссылка