К основному контенту

1 мин

Курсор

Light

5

Этот скрипт позволит тебе сделать эффект любой курсор при наведении на определенные элементы на твоей страничке на Tilda

Как сделать кастомный курсор при наведении в Tilda?

(cвернуть)
Инструкция

1. Создай на странице любые элементы, при наведении на которые должен изменяться курсор

2. Пропиши в генератор класс этих элементов

3. Загрузи в любую галерею на любой страничке твоего сайта изображение, которое должно заменять курсор при наведении, кликни по нему ПКМ и выбери "скопировать ссылку на изображение"

- Если это стандартный блок, то класс ты можешь найти при помощи CSS-helper в расширении

- Если это зеро, то задай класс через Add CSS Classname

4. Вставь эту ссылку в генератор и укажи размеры которые она должна иметь будучи курсором и остальные настройки анимации

5. Cкопируй код и вставь в самый верх страницы на которой нужен эффект

- Обрати внимание что параметры нужно указывать прямо как написано для ориентира полупрозрачным. Т.е. не забудь "px"

- Возможность задать разные классы есть для того, чтобы можно было делать разные эффекты для разных элементов на одной странице

Важно!

undefined
undefined
undefined
Отчистить поля
Загрузить сохраненные значения
undefined
Уверенным пользователям, которые каждый день зарабатывают на создании и верстке сайтов
Всё, что во Free и Pro на 1 месяц
и еще:
Pro на 1 год
2 990 ₽
1400 ₽ — ваша выгода
Всё, что во Free
и еще:
У кого пока непрогнозируемая рабочая загрузка и расширение нужно только 
в определенное время
Pro на 1 месяц
390 ₽
Для знакомства с сервисом и тестирования бесплатного функционала
Free
Этот мод доступен на PRO тарифе
Приоритетная поддержка
~50 новых модификаций, которые планируем выпустить в течение года
Обновления библиотеки с учетом изменений Tilda
ИИ-помощник с базовыми моделями
Возможность голосовать за новые моды и закрытый чат (скоро)
undefined
~25 Pro-модификаций
Генератор CSS
Распознавание блоков
Показать блоки т123
Автосохранение Zero-блока
Подсветка кода в т123
undefined
undefined
~20 бесплатных модификаций
Темная тема для Tilda
Кнопки быстрой публикации
Настройки меню в редакторе
Никаких автоплатежей
123
Примеры работы модификации
Чтобы увидеть пример курсора просто наведи курсор на шейп ниже
Чтобы увидеть пример курсора просто наведи курсор на картинки товаров в карточках ниже (это блок st300 кстати. В моде поставил Mix-blend-mode: Difference)
More products
t-store .js-product-img
Если что, то класс для всех картинок любых блоков из раздела магазин (если они подключены к каталогу) привел ниже