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

Этот скрипт позволит тебе сделать эффект любой курсор при наведении на определенные элементы на твоей страничке на 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

Этот мод доступен по подписке

0

299

₽

Voron Free

Voron Pro

всего за

/ мес.

Доступны все модификации за пару кликов

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

CSS Helper – возможность генерировать CSS без знания кода

Удобная подсветка кода + перенос строк в блоках т123 для удобства редактирования кода

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

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

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

299 ₽

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

Сетка и колонки для всего проекта (zero, стандартные блоки)

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

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

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

Оформить подписку

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

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

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

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

Accessories by Ionna Vautrin

108