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

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

1 мин.

Курсор

JavaScript

Обновление от 31.12.23 - В слайдер были добавлены новые поля, а также recid теперь нужно писать без приставки "#rec", поэтому если вдруг что-то не работает, то см. видео, а также текстовую инструкцию ниже↓

!

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

2. Пропиши в генератор класс этих элементов
- Если это стандартный блок, то класс ты можешь найти при помощи Css-helper в расширении
- Если это зеро, то задай класс через Add CSS Classname

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

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

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

Инструкция

Важно!

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

(Развернуть)

undefined

[{"lid":"1669886595581","ls":"10","loff":"","li_type":"in","li_name":"cls","li_subtitle":"\u041a\u043b\u0430\u0441\u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0434\u043e\u043b\u0436\u0435\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u044d\u0444\u0444\u0435\u043a\u0442","li_ph":"cors-hov","li_nm":"cls"},{"lid":"1669886595582","ls":"20","loff":"","li_type":"in","li_name":"picurl","li_subtitle":"\u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043a\u0443\u0440\u0441\u043e\u0440\u043e\u043c \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438","li_ph":"https:\/\/static.tildacdn.com\/...","li_nm":"picurl"},{"lid":"1683455925102","ls":"30","loff":"","li_type":"in","li_name":"picheight","li_subtitle":"\u0412\u044b\u0441\u043e\u0442\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u043a\u0443\u0440\u0441\u043e\u0440\u0430","li_ph":"30px","li_nm":"picheight"},{"lid":"1706086466186","ls":"40","loff":"","li_type":"in","li_name":"picwidth","li_subtitle":"\u0428\u0438\u0440\u0438\u043d\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u043a\u0443\u0440\u0441\u043e\u0440\u0430","li_ph":"30px","li_nm":"picwidth"},{"lid":"1706086480690","ls":"50","loff":"","li_type":"in","li_name":"speed","li_subtitle":"\u0421\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u0438\u0437 \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u0432 \u043a\u0430\u0441\u0442\u043e\u043c","li_ph":"0.3","li_nm":"speed"},{"lid":"1683455938871","ls":"60","loff":"","li_type":"sb","li_name":"blend","li_subtitle":"mix-blend-mode: \u0422\u0438\u043f \u0441\u043c\u0435\u0448\u0435\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u043e\u0432 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u0441 \u0444\u043e\u043d\u043e\u043c (\u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e)","li_variants":"None\nMultiply\nOverlay\nDarken\nLighten\nColor-dodge\nColor-burn\nDifference\nExclusion\nHue\nSaturation\nColor\nLuminosity","li_defselitem":"1","li_nm":"blend"},{"lid":"1683455953783","ls":"70","loff":"y","li_type":"cb","li_name":"once","li_label":"\u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u043f\u043e\u0441\u0435\u0449\u0435\u043d\u0438\u0438","li_nm":"once"}]

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

Отчистить поля

undefined

Этот мод доступен в PRO тарифе

0

349

₽

Voron Free

Voron Pro

всего за

/ 1 мес.

Доступ ко всем модификациям библиотеки

Просмотр используемых блоков и их настроек для любого сайта, сделанного на Tilda, в том числе step-by-step анимаций

Полный доступ ко всем функциям расширения для Тильды

Регулярные обновления модификаций и новые модификации включены в стоимость

Техническая поддержка в Telegram

Никаких автоплатежей

Только базовые функции

349 ₽

Доступ к 11 бесплатным модификациям

Бесплатный функционал расширения для Тильды

Темная тема для Tilda Publishing

Отображение всех используемых блоков в боковом меню

Установить расширение

Открыть доступ

После создания они будут работать даже если PRO доступ закончится

Чтобы увидеть пример курсора просто наведи курсор на шейп ниже

Пример работы модификации

Чтобы увидеть пример курсора просто наведи курсор на картинки товаров в карточках ниже (это блок st300 кстати. В моде поставил Mix-blend-mode: Difference)

Пример работы модификации 2

Accessories by Ionna Vautrin

108