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

🔥 Интенсив, в котором за 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 - hyoutube.com/live/IwOTswi7kCU День 2 - youtube.com/live/UM8MBSzIslU День 3 - youtube.com/live/w-mXXgKx5NE День 4 - youtube.com/live/5eM4QuiAcF0 День 5 - youtube.com/live/ZivDPczCCpk День 6 - youtube.com/live/fyqwAi_0Gz0 Поддержи стрим лайком 👍! Скачать 🖥 папку проекта - t.me/redgroup/2378 Как создать анимированный сайт в стиле Netflix? В этом видео я покажу, как сделать крутой интерактивный UI, где каждая кнопка🔥 реагирует плавными эффектами. Используем HTML, CSS, JavaScript и немного магии, чтобы сайт выглядел динамичным и современным. Netflix известен своим стильным интерфейсом, и мы попробуем повторить его лучшие элементы: анимация кнопок, плавные ховеры, переходы и интерактивные элементы. Такой UI подойдет для видео-сервисов, дашбордов и даже лендингов! Если хочешь прокачать свои навыки фронтенда, научиться делать WOW-эффекты и погрузиться в мир анимации для веба, то погнали! РЕФЕРЕНС - dribbble.com/shots/24181037-Amuxo-On-demand-stream… Таймкоды сгенерированы автоматически и скорректированы Максом: 00:00 – Начало 01:12 – Введение и планы на стрим 04:19 – Обсуждение планов и музыки 07:04 – Обзор видеоплееров и их возможностей 10:32 – Проблемы с установкой Next Video 16:33 – Настройка React Player 23:19 – Проблемы с анимацией и заглушками 24:12 – Работа с кликами и состояниями 26:05 – Ошибка с белой пеленой и её исправление 30:18 – Логика анимации и взаимодействие с UI 35:16 – Проблемы с видеоплеером и их отладка 39:03 – Тонкая настройка плеера 44:34 – Обзор альтернативных видеоплееров 50:14 – Сравнение и выбор лучшего решения 01:00:04 – Оптимизация проекта и производительность 01:04:45 – Улучшение структуры сайта 01:10:29 – Ошибки текущего сайта и их исправление 01:14:44 – Проблемы с видео и блюром 01:19:04 – Работа с анимацией и визуальными элементами 01:27:12 – Анимация хедера и интерактивность 01:30:27 – Выбор библиотеки и финальная настройка 01:38:00 – Вопросы и ответы от зрителей 01:43:04 – Сбор данных для визы и оформление документов 01:44:43 – Жизнь за границей: плюсы и минусы 01:45:40 – Проблемы с реализацией проекта 01:50:09 – Верстка и её актуальность 01:52:22 – Завершение проекта и подведение итогов 🎹 Клавиатура - 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