Тёмный

Нестандартный (кастомный) курсор мышки для сайта на webflow. Делаем свой анимированный курсор 

Фриланс прокачка
Подписаться 21 тыс.
Просмотров 3,1 тыс.
50% 1

#вебдизайн #webflow #вебфлоу
Сделать свой собственный курсор на сайте webflow очень просто, сегодня я это покажу в рамках бесплатного курса по разработке сайта на вебфлоу.
Мы можем использовать вместо стандартного курсора операционной системы по сути, что угодно! От любой картинки до див блока, который можно оформить на свой вкус и даже анимировать, что бы он реагировал на наведение на кнопки, ссылки и прочие интерактивные элементы.
Можно как скрыть стандартный курсор на сайте, так и сделать как я на видео, совместить стандартный (немного измененный) и не стандартное решение и они будут идеально работать вместе, дополняя друг друга и создавая настоящий вау эффект для посетителей сайта.
Использую не стандартный курсов в имиджевых сайтах, вы сможете получать больше денег от своих заказчиков, поскольку такая штука редко используется и будет выделять сайт среди конкурентов.
•••••••••••••••••••••••••••••••
- Полезные штуки для webflow freelance-blog...
- Индивидуальное обучение freelance-blog...
•••••••••••••••••••••••••••••••
БЕСПЛАТНЫЕ курсы по webflow:
👉 • Базовый (для новичка) • Трелло для фрилансера,...
👉 • Портфолио для фрилансера (уровень средний) • Курс по созданию портф...
👉 • Портфолио для студии (уровень сложный) • Бесплатный курс по раз...
👉 • Делаем сложный сайт (уровень профи) • Сайт фотографа, беспла...
•••••••••••••••••••••••••••••••
Если вы хотите, зарабатывать те деньги, которые ждут вас через 5 лет самостоятельного роста, буквально телепортироваться в будущее и начать делать профессиональные сайты уже сейчас - тогда я способен вам помочь! freelance-blog...
Нет никакого потока, групп, кураторов. Только вы и я. Прокачиваю именно вас.
•••••••••••••••••••••••••••••••
Моя почта - artstrangers@gmail.com
Телеграм @artstranger
•••••••••••••••••••••••••••••••
👉 • Портфолио - freelance-blog...
👉 • Инстаграм - / artstranger.ru
👉 • Бесплатные плюшки - freelance-blog...
👉 • Материалы для уроков - freelance-blog...
👉 • Индивидуальное обучение - freelance-blog...
•••••••••••••••••••••••••••••••

Опубликовано:

 

22 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 35   
@Svetlana-hk3mm
@Svetlana-hk3mm 8 месяцев назад
Курс - отличный! Спасибо большое!
@freelance-pro
@freelance-pro 8 месяцев назад
Пожалуйста ☺️
@spiritualhealing4u
@spiritualhealing4u 11 месяцев назад
Прекраснейший курс. Столько анимации, то чего так не хватало!)
@freelance-pro
@freelance-pro 11 месяцев назад
Спасибо ☺️ да анимация рулит
@irusyabusya3006
@irusyabusya3006 2 года назад
Согласна с предыдущим комментом, даже при миним знании английского языка можно учить webflow, но это очень замедляет процесс. Всегда удобней и легче смотреть видео уроки на русском! Спасибо за твои видео!
@freelance-pro
@freelance-pro 2 года назад
Пожалуйста 😉 рад для вас стараться)))
@hakobhokhoyan1114
@hakobhokhoyan1114 Год назад
4 часа от моей жизни ушло на анимацию увеличивание курсора и на 5 ом часу я вспомнил что можно найти решение в коментах😂😂 все же Дмитрий тебе огромное спасибо что делаешь такие крутые бесплатные видеоуроки👍👍👍
@freelance-pro
@freelance-pro Год назад
Пожалуйста ☺️
@olyaraevskaya1047
@olyaraevskaya1047 Год назад
дякую
@freelance-pro
@freelance-pro Год назад
Будь ласка
@slavjaninarts2969
@slavjaninarts2969 Год назад
Сначало курсор прятался за фоном, потом в коментах прочел что индекс в плюс поствавить,помогло. Только круг при наведении курсора сужается а не увеличивается)) все вроде делал по инструкции...
@freelance-pro
@freelance-pro Год назад
Есть проще вариант ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-wovCSL6_4jc.html
@digram_plus
@digram_plus Год назад
Спасибо за уроки! Они до сих пор актуальны и очень крутые! Правда слышно плохо, даже ноут на всю громкость не вытягивает, приходится наушники надевать. Вопрос - после того, как мы сделали тень меню и лого в цвет фона, анимация при наведении (где круг расширяется) становится ПОД тенью от букв, т.е. эта тень теперь съедает часть круга. Можно это исправить? Чтобы круг так и оставался сверху?
@freelance-pro
@freelance-pro Год назад
Громкость можно увеличить есть расширения в браузеры исправить можно с помощью z index
@matthewillesley3187
@matthewillesley3187 2 года назад
у меня почему то не удается сделать анимацию, чтобы расширялся кружок при наведении на меню.
@freelance-pro
@freelance-pro 2 года назад
Попробуйте начать сначала и повторять все 1 в 1, а то не глядя сложно понять где именно вы ошиблись. Ну или приходите на менторство там всему научу freelance-blog.com/study/
@ТатьянаМиронова-ю3в
Ох уж этот курсор.. Он почему-то прячется у меня за фоном секций. И тут я подумала, может это из-за зет индекса, который стоит в минусах. Поставила 2. В итоге пропала реакция на кнопку круглую. Вернула индекс и кнопка реагирует, но курсора кругляша не видно. Кааааак эту логику понять?
@freelance-pro
@freelance-pro Год назад
Есть новое видео про курсор
@makellaa
@makellaa 2 года назад
Забыл выбрать клас при наведении на меню. И обрезал кадр вот здесь 12:27
@freelance-pro
@freelance-pro 2 года назад
Да, к сожалению, не всегда получается идеально смонтировать.
@makellaa
@makellaa 2 года назад
@@freelance-pro что бы это понять у меня ушло 3 часа ).
@freelance-pro
@freelance-pro 2 года назад
А что бы это снять и смонтировать, у меня ушло 6 часов...
@digram_plus
@digram_plus Год назад
Чувак, огромное спасибо! Про класс сказал - все заработало. Я вот чего не пойму - пока класс не выбрал для "меню", увеличение круга не срабатывало вообще. По идее ведь, если мы н выбрали конкретный класс, а оставили элемент, то увеличение круга должно срабатывать при любом наведении на ссылки. Разве нет?
@slavjaninarts2969
@slavjaninarts2969 Год назад
@@digram_plus подскажи, где этот класс находится?) Я тоже завис с этим курсором
@tilaig
@tilaig 2 года назад
Привет, у меня такой вопрос, почему при просмотре у меня курсор нормально сидит по середине круга, а при публикации сайта курсор слетает и круг уже находится выше, чем курсор
@freelance-pro
@freelance-pro 2 года назад
Здравствуйте. Что-то делаете не так как на видео, тут сложно не глядя на ваш проект сказать в чем проблема, надо заходить и смотреть. Тут 2 варианта начать делать по видео сначала, или приходить на обучение где все косяки мы разбираем и решаем
@debiamo
@debiamo 2 года назад
Брат. Братюнь. Сенсэй. Родной. Умоляем. Разбери систему волшебства этого чувака. Своими словами. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-WJz3zBhen2A.html
@freelance-pro
@freelance-pro 2 года назад
Не вопрос. Сделаю!
@iakover
@iakover 2 года назад
@@freelance-pro Есть видео или ещё не сделали?
@freelance-pro
@freelance-pro 2 года назад
Ну пока моего способа разработки сайтов мне хватает, сейчас снимаю новый курс (часть видео есть на канале) лучше то смотрите)) а это видео может позже адаптирую. Как появится свободное время, а если нужно делать резиновый сайт то и такой курс есть на канале ru-vid.com/group/PLb25rCxggZ7JL9CpfaJ6tQrOiM6QHfFIV
@iakover
@iakover 2 года назад
@@freelance-pro Спасибо большое за вашу работу! Делаю сейчас курсор по вашему видео, столкнулся с проблемой. Мне нужно полностью поменять курсор на кастомный. В предложенном вами варианте, что то следует за курсором, пропадает под блоками (из-за отрицательного z индекса cur-fn). Может быть посоветуете, как можно реализовать подобную затею не теряя курсор за блоками, z индекс которых выше cur-fn? Установка z индекса самого курсора хоть до 1000 не решает проблему
@freelance-pro
@freelance-pro 2 года назад
Да, использовать кастомный код, гугл поможет или приходите на обучение всему научу freelance-blog.com/study/
Далее
Eco-hero strikes again! ♻️ DIY king 💪🏻
00:48
Ромарио стал Ромой
00:46
Просмотров 505 тыс.
Create Custom Cursors in Webflow
8:01
Просмотров 73 тыс.