Создание эффекта свечения, следующего за курсором, в Webflow (с использованием переменных)
Francesco Castronuovo и Supasaito
0:00 / 0:00
Создание эффекта свечения, следующего за курсором, в Webflow (с использованием переменных)
649 просмотров · 6 месяцев назад
Francesco Castronuovo и Supasaito
649 просмотров · 6 месяцев назад
В этом уроке мы создадим эффект плавного перемещения курсора по всей сетке карточек в Webflow, при этом курсор всегда будет идеально обрезан внутри каждой отдельной карточки.
Бесплатный письменный урок → https://francescocastronuovo.com/lear...
На первый взгляд, кажется, что для такого рода взаимодействия потребуется много JavaScript.
Но самое интересное: на самом деле это не так.
В этом видео мы разберем, как создать этот эффект, используя:
✔ Простую структуру сетки карточек
✔ Переменные Webflow
✔ Классические интерактивные элементы Webflow
✔ Умелое использование свойства background-attachment: fixed
✔ Всего несколько строк CSS
Мы также пойдем еще дальше, добавив эффект светящейся границы, используя ту же самую логику анимации — таким образом, вся настройка останется чистой, масштабируемой и удивительно простой в использовании.
Если вам нравятся уроки по Webflow, которые фокусируются не только на том, как что-то создать, но и на том, почему это работает, то этот урок для вас.
📂 Полезные ресурсы:
🔗 Supasaito: https://www.supasaito.com?utm_source=...
🖼️ Макет «Клетчатка» в Webflow (урок без кода): • Masonry Layout in Webflow (No-Code Tutorial!)
💻 Ссылка на клонируемый шаблон: https://webflow.com/made-in-webflow/w...
🎵 Рекомендация Spotify: “Boogie Wonderland” – Earth, Wind & Огонь👇
• Earth, Wind & Fire - Boogie Wonderland (Of...
🔥 Если вам понравилось видео, не стесняйтесь оставлять комментарии, ставить лайки и подписываться на мой канал. 😁
Или вы можете просто нажать кнопку «Спасибо»! ♥️
---
Мой публичный профиль Webflow:
https://webflow.com/@francescocastro
Мы можем пообщаться в LinkedIn:
/ francescocastronuovo
Или мы можем познакомиться друг с другом на X:
https://x.com/francescoflow
Или почему бы и нет? Даже в Instagram:
/ francescocastronuovo
---
00:00 Вступление
1:03 Анализ структуры страницы
2:39 Понимание эффекта (CSS + переменные)
10:06 Разбор интерактивных элементов
14:49 Добавление подсветки границы
18:31 Заключение и рекомендации по музыке
#webflow #madeinwebflow #webflowtutorial #nocode