Перейти к содержимому

Создание эффекта свечения, следующего за курсором, в 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