АНИМИРОВАННЫЙ САЙТ в стиле NETFLIX. Каждая КНОПКА — 🔥 День 3

🔥 Интенсив, в котором за 50 уроков мы разработали свой YouTube с нуля! [Бестселлер] – htmllessons.link/netflix 💥 МК Авторизация 4.0 (уже 8 марта!) - t.me/redgroup/2356 💸 Поддержать стримера / задать вопрос - dub.sh/da или dub.sh/dp ❤️ Отзывы тут - t.me/htmllessons_reviews 🟣 Twitch (тут с музыкой) - www.twitch.tv/red_group 🦋 Наш ТГ канал - t.me/redgroup 🍥 Тема: Moonlight Шрифт: Jetbrains Mono Иконки: Charmed День 1 - youtube.com/live/IwOTswi7kCU День 2 - youtube.com/live/UM8MBSzIslU Поддержи стрим лайком 👍! Скачать 🖥 папку проекта - t.me/redgroup/2378 Как создать анимированный сайт в стиле Netflix? В этом видео я покажу, как сделать крутой интерактивный UI, где каждая кнопка🔥 реагирует плавными эффектами. Используем HTML, CSS, JavaScript и немного магии, чтобы сайт выглядел динамичным и современным. Netflix известен своим стильным интерфейсом, и мы попробуем повторить его лучшие элементы: анимация кнопок, плавные ховеры, переходы и интерактивные элементы. Такой UI подойдет для видео-сервисов, дашбордов и даже лендингов! Если хочешь прокачать свои навыки фронтенда, научиться делать WOW-эффекты и погрузиться в мир анимации для веба, то погнали! РЕФЕРЕНС - dribbble.com/shots/24181037-Amuxo-On-demand-stream… Таймкоды сгенерированы автоматически и скорректированы Максом: 00:00 – Начало 00:36 – Подготовка к стриму 03:46 – Начало работы над анимацией 05:30 – Проблемы с анимацией и их решение 07:28 – Настройка плавности анимации 10:42 – Финальные настройки и тестирование 13:02 – Завершение работы над первым блоком 16:30 – Финальные штрихи и доработки 18:31 – Вычисление угла поворота в анимации 20:24 – Проблемы с индексами и математикой 25:26 – Логика анимации и задержки 28:23 – Реализация функции для UI 30:43 – Проблемы с контентом и поиск решений 33:10 – Тестирование и отладка анимации 38:02 – Решение проблемы с поворотом элементов 40:16 – Проблемы с делением и расчётами 45:19 – Вопросы по контенту и форматам стримов 48:38 – Индексы, баги и их фиксы 54:27 – Заключение первой части и размышления 58:22 – Оптимизация анимации и производительность 01:08:05 – Музыка и программирование 01:10:24 – Рейтинг и анимация элементов 01:13:09 – Галерея, плейлисты и UI-решения 01:16:35 – Карусель и работа с иконками 01:20:07 – Проблемы с размерами и масштабированием 01:32:08 – Оптимизация кода и настройка проекта 01:41:08 – Анимация текста и взаимодействие с UI 01:47:10 – Вызовы и сложные моменты в программировании 01:49:55 – Достижения, обучение и рост в разработке 01:55:04 – Улучшение анимаций и контроль времени 02:09:52 – Запись и публикация на Twitch 02:18:03 – Анимация и структура страницы 02:25:20 – Создание интерактивной медиа-страницы 02:28:45 – Работа с параметрами и индексами 02:37:03 – Завершение работы и планы на будущее 🎹 Клавиатура - NuPhy Halo65 / switch Night Breeze или KZZI K75Pro (свитчи те же) Если есть какие то вопросы по этой теме - дай знать в 💬 комментариях! 🌿 Плейлист с полными курсами для новичков и не только -    • RED Course | Полные курсы за короткое врем...… 👇 Полезные ссылки: Настройка VS Code    • Как сделать VS Code красивым и быстрым за ...   Настройка терминала    • Настройка терминала 2024 [Oh My zsh / Плаг...   👉 Все ссылки (+ настройка редактора) и информация обо мне - htmllessons.io/links Контакты для связи partners@htmllessons.io - Реклама и сотрудничество work@htmllessons.io - Если хотите к нам в команду #анимация #frontend #Netflix #RedGroup #RedGroupPlus