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

Watch on YouTube (Embed)

Switch Invidious Instance

Show annotations

679

27

Genre: Education

License: Standard YouTube license

Family friendly? Yes

Shared February 26, 2025

🔥 Интенсив, в котором за 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 Поддержи стрим лайком 👍! Скачать 🖥 папку проекта - t.me/redgroup/2378 Как создать анимированный сайт в стиле Netflix? В этом видео я покажу, как сделать крутой интерактивный UI, где каждая кнопка🔥 реагирует плавными эффектами. Используем HTML, CSS, JavaScript и немного магии, чтобы сайт выглядел динамичным и современным. Netflix известен своим стильным интерфейсом, и мы попробуем повторить его лучшие элементы: анимация кнопок, плавные ховеры, переходы и интерактивные элементы. Такой UI подойдет для видео-сервисов, дашбордов и даже лендингов! Если хочешь прокачать свои навыки фронтенда, научиться делать WOW-эффекты и погрузиться в мир анимации для веба, то погнали! РЕФЕРЕНС - dribbble.com/shots/24181037-Amuxo-On-demand-stream… Таймкоды сгенерированы автоматически и скорректированы Максом: 00:00 – Начало 00:10 – Введение и настройка проекта 01:34 – Начало работы над анимацией 02:52 – Проблемы с анимацией и их анализ 05:16 – Решение багов в анимации 07:21 – Доработка анимации и исправление ошибок 10:59 – Обсуждение целей проекта 13:35 – Решение проблем с каруселью 22:49 – Заключение первой части и планы 26:20 – Анимация и проблемы с Z-индексом 29:58 – Ошибки с тайм-кодами и просмотрами 31:03 – Дизайнерские решения и их влияние на проект 37:03 – Эксперименты с анимацией и её настройкой 42:36 – Оптимизация параметров анимации 49:21 – Финальные штрихи и дальнейшие планы 50:29 – Тонкая настройка анимации 54:53 – Будущее PHP и его перспективы 56:43 – Корректировка анимации 01:06:27 – Мотивация и дисциплина в разработке 01:10:16 – Завершение работы над анимацией 01:18:46 – Обсуждение обновлений и правки анимации 01:21:31 – Проблемы с комментариями в Telegram 01:23:00 – Ошибки в меню и их исправление 01:27:17 – Работа с сервером и middleware 01:37:05 – Реализация меню через состояние 01:41:14 – Рефакторинг и улучшение кода 01:50:18 – Оптимизация форматирования кода 02:05:04 – Улучшение производительности проекта 02:12:22 – Серверная часть и ее оптимизация 02:17:05 – Ошибки WebStorm и их обход 02:24:13 – Архитектурные методологии и упрощение разработки 02:30:13 – Проблемы с версиями и обновлениями 02:39:29 – Последний рефакторинг кода 02:42:12 – Работа с анимацией и экспортом 02:44:21 – Оптимизация кода и структуры блоков 02:50:14 – Завершение стрима и обсуждение будущих планов 🎹 Клавиатура - 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