Эффект прожектора Webflow + анимация Prism (без кода + GSAP Magic и фильтр SVG)

В этом уроке мы создадим полностью интерактивный главный раздел в Webflow — с эффектом подсветки, который следует за курсором, плавной анимацией при наведении курсора на основе GSAP и пользовательским SVG-фильтром-призмой, добавляющим эффект свечения с изменением цвета. Бесплатный письменный урок → https://francescocastronuovo.com/lear... Вот что вы узнаете шаг за шагом: ✅ Настройка главной секции с чистой, масштабируемой структурой ✅ Создание радиального прожектора, отслеживающего движение мыши ✅ Анимация главного изображения с помощью масштабирования и вращения GSAP при наведении курсора ✅ Стилизация кнопки с помощью плавных CSS-переходов ✅ Применение пользовательского SVG-фильтра ✅ Использование GSAP + JavaScript для анимации смещения RGB для эффекта призмы ✅ Обеспечение полной доступности (указатель + клавиатура) Результат? Динамичная, элегантная главная секция, которая выглядит премиально и профессионально — и которую вы легко сможете адаптировать под свои проекты. 📂 Полезные ресурсы: Supasaito: https://www.supasaito.com?utm_source=... Ссылка на клонируемый файл: https://webflow.com/made-in-webflow/w... Павел Червинский на Unsplash: https://unsplash.com/it/@pawel_czerwi... Aimer - Sign (песня):    • Aimer「Sign」MUSIC VIDEO（TVアニメ『狼と香辛料MERCHANT...   🔥 Если вам понравилось видео, оставляйте комментарии, ставьте лайки и подписывайтесь на мой канал. 😁 --- Мой публичный профиль Webflow: https://webflow.com/@francescocastro Мы можем пообщаться в LinkedIn:   / francescocastronuovo   Или мы можем познакомиться друг с другом на X: https://x.com/francescoflow Или почему бы и нет? Даже в Instagram:   / francescocastronuovo   --- 0:00 Вступление 1:12 Создание структуры главной секции 9:20 Настройка эффекта «прожектора» 17:29 Создание анимации «прожектора» (старые нативные интерактивные элементы Webflow) 25:12 Создание анимации при наведении курсора (нативные интерактивные элементы Webflow GSAP) 32:05 Использование SVG-фильтра для добавления эффекта призмы к изображению (пользовательский код GSAP) 38:52 Заключение #webflow #madeinwebflow #webflowtutorial #nocode #gsap #svgfilter