Следующая революция в верстке

внешний интерфейс GitHub Программа перевода самородков

Если вы посещали какие-либо переговоры по веб-дизайну за последние несколько лет, вы, вероятно, видели этот знаменитый твит от Джона Голда:

Это высмеивает тот факт, что многие веб-сайты сегодня выглядят одинаково, потому что все они следуют одним и тем же стандартным методам компоновки, которые мы коллективно решили использовать. Начать блог? Основная панель, боковая панель инструментов. Маркетинг веб-сайта? Большая картина, рамка из трех глазных яблок (долженэто три).

Когда мы оглядываемся назад на ранние веб-страницы, я думаю, что сегодня в веб-дизайне больше творчества.

Введите CSS-сетку

Gridэто первый реальный инструмент для веб-верстки. Все, что у нас было до сих пор, от таблиц и плавающих элементов до абсолютного позиционирования и флексбоксов, было разработано для решения различных проблем, и мы нашли способы использовать и злоупотреблять этим для макета.

Смысл этих новых инструментов не в том, чтобы снова создавать одно и то же, используя другую базовую технологию. У него больше потенциала: он может изменить наше представление о макете, позволяя нам делать что-то совершенно новое и необычное в Интернете.

Я знаю, что трудно изменить мышление, когда ты долго строишь что-то определенным образом. Нас учат думать о веб-сайте как о комбинации заголовка, контента и нижнего колонтитула. Есть также полосы и коробки.

Но для того, чтобы наша отрасль продолжала совершенствоваться (и чтобы наша работа оставалась интересной), полезно время от времени делать шаг назад и переосмысливать то, как мы работаем.

Если бы мы этого не сделали, мы бы по-прежнему использовали разделенные GIF-файлы и все заглавные буквы.<TABLE>теги для создания вещей. 😉

Итак, как это будет выглядеть?

Я посмотрел на dribbble идеи, чтобы разбить макет. Дизайн, который с первого взгляда заставил бы фронтенд-разработчика вроде меня нахмуриться.

Там много отличных работ - вот некоторые из моих любимых:

"Warehouse" by Cosmin Capitanu

"Fashion Boutique" by KREATIVA Studio

"Organic Juicy Co." by Broklin Onjei

"Travel Summary" by Piotr Adam Kwiatkowski

"Digital Walls" by Cosmin Capitanu

Мне особенно нравится последний. Это напоминает мне «Metro Tiles», которые были в моде в Windows 8. Он не только визуально впечатляет, но и очень гибкий — работает на телефонах, планшетах, даже на огромных экранах телевизоров или в AR по предложению дизайнера.

Насколько сложно сделать что-то подобное, учитывая инструменты, которые у нас есть сегодня? Я хотел разобраться, поэтому начал строить прототип.

Я пытаюсь реализовать это в реальных условиях производственной среды. Поэтому интерфейс должен быть отзывчивым, производительным и доступным. (Однако это не требует восстановления на уровне пикселей, потому что вы знаете...Это невозможно. )

Результат выглядит следующим образом:

Вы можете проверить это на CodepenОкончательные результаты.

👉Поскольку это только для демонстрационных целей, я не обновлял и не исправлял старые браузеры. Моя цель здесь — протестировать функциональность современного CSS, поэтому не все функции имеют кросс-браузерную поддержку (см. ниже). Я считаю, что это лучше всего работает в последней версии Firefox или Chrome.

Несколько интересных моментов в процессе реализации:

макет

Неудивительно, что ключевым элементом Metro Tiles является сетка. Вся логика компоновки адаптивна под этот блок кода:

.boxgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-auto-rows: minmax(150px, auto);
    grid-gap: 2rem .5rem;

    &__item {
        display: flex;

        &--wide {
            grid-column: span 2;
        }
        &--push {
            grid-column: span 2;
            padding-left: 50%;
        }
    }
}

Магия в основном во втором ряду.repeat(auto-fit, minmax(150px, 1fr))Создание столбца обрабатывается быстро, что означает, что он будет размещать как можно больше блоков в ряд, чтобы убедиться, что они выровнены с внешними краями.

--pushКлассы декоратора используются для достижения эффекта дизайна, где некоторые коробки «пропустить» колонку. Поскольку это невозможно без явных настроек сочинений, я использовал трюк: фактические клетки сетки охватывают два столбца, но только позволяют достаточно места для заполнения клеток.

анимация

В оригинальном дизайне каждый фон и каждая сетка тайлов двигались с разной скоростью, создавая иллюзию глубины. Ничего особенного, просто старый добрый параллакс.

Хотя этот эффект обычно достигается путем связывания событий прокрутки в Javascript и последующего применения различных стилей преобразования, есть лучший способ: полностью в CSS.

Секрет здесь в том, чтобы использовать 3D-преобразования CSS для разделения слоев по оси Z. Скотт Келлум и Кит Кларкэта технологияНа самом деле это достигается использованием перспективы в контейнере прокрутки и translateZ в дочерних элементах параллакса:

.parallax-container {
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;

  /* set a 3D perspective and origin */
  perspective: 1px;
  perspective-origin: 0 0;
}

.parallax-child {
  transform-origin: 0 0;
  /* move the children to a layer in the background,
     then scale them back up to their original size */
  transform: translateZ(-2px) scale(3);
}

Огромным преимуществом этого подхода является повышение производительности (поскольку он не затрагивает DOM с вычисляемыми стилями), что приводит к меньшему количеству перерисовок и плавной прокрутке параллакса со скоростью почти 60 кадров в секунду.

точка адсорбции

CSS Scroll Snap PointsЭто немного экспериментальная функция, но я думаю, что она хорошо подходит для этого дизайна. По сути, вы можете указать браузеру «привязываться» к элементу, когда он прокручивается до точки рядом с этим элементом в документе. На данный момент поддержка очень ограничена, лучше всего использовать ее в Firefox или Safari.

В настоящее время существуют разные версии спецификации, только Safari поддерживает последнюю реализацию. Firefox по-прежнему использует старый синтаксис. Комбинированный метод выглядит так:

.scroll-container {
    /* current spec / Safari */
    scroll-snap-type: y proximity;

    /* old spec / Firefox */
    scroll-snap-destination: 0% 100%;
    scroll-snap-points-y: repeat(100%);
}
.snap-to-element {
    scroll-snap-align: start;
}

scroll-snap-typeскажите контейнеру прокрутки двигаться впередyось (вертикальное направление) в соответствии сproximityАдсорбцию проводят «строго». Это позволяет браузеру решить, можно ли использовать точки привязки и подходит ли время для перехода.

Для мощных браузеров точки привязки являются небольшим улучшением, в то время как другие браузеры просто возвращаются к прокрутке по умолчанию.

плавная прокрутка

Единственное место, где задействован Javascript, — это плавная прокрутка элементов меню слева или нажатие на стрелки направления вверх/вниз. Это из простой якорной ссылки на странице<a href="#vienna">Перейти к прогрессивному улучшению для выбранного раздела.

Для анимации я решил использовать ваниль.Element.scrollIntoView()метод(MDN Docs). Некоторые браузеры принимают необязательный параметр для использования «плавной» прокрутки вместо немедленного перехода к целевому разделу.

scroll behaviour propertyВ настоящее время это рабочий проект, поэтому общей поддержки пока нет. В настоящее время эту функцию поддерживают только Chrome и Firefox, однако при желании вы можете использоватьпластырь.

креативное мышление

Хотя это всего лишь одно объяснение того, что возможно, я уверен, что существует множество других инновационных идей, которые можно реализовать с помощью имеющихся у нас инструментов. Тенденции в дизайне могут приходить и уходить, как всегда, но я уверен, что стоит помнить, что Интернет — это изменчивая среда. Технологии постоянно меняются, почему наша планировка остается неизменной? Иди исследуй.

больше ресурсов

Если вы обнаружите ошибки в переводе или в других областях, требующих доработки, добро пожаловать наПрограмма перевода самородковВы также можете получить соответствующие бонусные баллы за доработку перевода и PR. начало статьиПостоянная ссылка на эту статьюЭто ссылка MarkDown этой статьи на GitHub.

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из ИнтернетаНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.

Категории