Все публикации подряд (habrahabr_ru) wrote,
Все публикации подряд
habrahabr_ru

Category:

[Перевод] Как написать интерфейс пользователя (UI) PlayStation 5 на JavaScript

https://habr.com/ru/post/547410/?utm_source=habrahabr&utm_medium=rss&utm_campaign=547410

Интерактивное демо PS5.js


Вот демо интерфейса PS5, созданного при помощи анимаций на JavaScript и CSS, которые мы будем писать в этом туториале. Интерактивный пример можно потрогать в оригинале статьи.


Поставьте звёздочку или форкните проект ps5.js 35,9 КБ на GitHub.

Я написал твит о демо PS3, когда создавал на JavaScript базовую версию UI консоли PS3. Пока у меня нет кода, но я планирую его опубликовать. Более того, данный туториал построен на основании знаний, полученных при создании первой работы.

Подготовка


Чтобы не усложнять себе жизнь, мы не будем использовать никаких фреймворков.

Но даже если вы используете фреймворки или библиотеки, то вам всё равно нужно разработать свой паттерн решения задачи. В этом туториале про UI я расскажу о самой концепции, лежащей в основе разработки. Этот подход можно легко адаптировать к React, Vue или Angular.

Я использовал эту заготовку HTML-файла с заранее созданными flex-стилями. Он содержит всё необходимое и общую структуру приложения, позволяющую приступить к работе. Это не React или Vue, но это та минимальная конфигурация, которая необходима для создания приложения. Я использую эту заготовку каждый раз, когда мне нужно начать работу над новым ванильным приложением или сайтом.
Читать дальше →
Subscribe
  • Post a new comment

    Error

    default userpic
    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 0 comments