Java, UX, HTML, CSS, WEB-design

Beercamp: Эксперимент с CSS 3D

Краткое описание по статье Beercamp: Эксперимент с CSS 3D

Название: Beercamp: Эксперимент с CSS 3D . Краткое описание: ⭐ Том Джанна . Дата публикации: 18.02.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года


  • Том Джаннаттасио

  • 0 Комментарии

Beercamp: Эксперимент с CSS 3D

  • 11 минут чтения

  • Кодирование, CSS3

Краткое резюме ↬

Эксперимент этого года: всплывающая 3D-книга в стиле доктора Сьюза. Если вы еще не видели его, зайдите и посмотрите. Веб-сайт был тестом, чтобы увидеть, насколько далеко можно продвинуть 3D-преобразования SVG и CSS. В процессе я многому научился и хотел поделиться некоторыми приемами, которые показались мне полезными при работе в 3D-пространстве.

Недавно я имел удовольствие организовывать веб-сайт Beecamp в этом году. Если вы не в курсе, Beercamp — это вечеринка для дизайнеров и разработчиков. Это также площадка для экспериментов с интерфейсом. Каждый год мы отказываемся от поддержки браузеров и бросаем «Pshaw» в лицо семантике, чтобы мы могли поиграть с некоторыми новыми функциями современных браузеров.

Эксперимент этого года: всплывающая 3D-книга в стиле доктора Сьюза. Если вы его не видели, зайдите и посмотрите. Веб-сайт был тестом, чтобы увидеть, насколько далеко можно продвинуть 3D-преобразования SVG и CSS. В процессе я многому научился и хотел поделиться некоторыми приемами, которые показались мне полезными при работе в 3D-пространстве.


«Пивной лагерь 2012: история международного озорства»

Прежде чем мы начнем, обратите внимание, что объяснить все о веб-сайте, не утомив вас до смерти, было бы чертовски невозможно. Ради вас и себя я приведу лишь краткие выводы. Когда вы просматриваете фрагменты кода, имейте в виду, что используется jQuery и что большая часть кода была удалена для простоты (включая префиксы браузера).

Дальнейшее чтение на SmashingMag:

  • Вызов переднего плана принят: CSS 3D Cube
  • Приключения в третьем измерении: 3D-преобразования CSS
  • 53 техники CSS, без которых вы не сможете жить
  • Создание адаптивных фигур с помощью Clip-Path

Еще после прыжка! Продолжить чтение ниже ↓

Наконец, пожалуйста, помните, что это эксперимент! Он не будет работать во всех браузерах. Он не деградирует изящно, а разметка менее чем поэтична. Отложите на мгновение свои убеждения и давайте повеселимся.

Вывод № 1. Исследование 3D-пространства — это весело

Прежде чем я начал создавать веб-сайт Beercamp, я провел небольшое «исследование» того, что делает всплывающие книги такими увлекательными. Когда я пролистывал бумажную версию книги доктора Сьюза, О, места, куда ты пойдешь, Я поймал себя на том, что рассматриваю каждую страницу с разных сторон. Смотреть, как все выглядело с разных точек зрения, было весело, и взаимодействие с окружающей средой было интересным.


Вдохновение для Беркампа: «О места, куда вы отправитесь» доктора Сьюза.

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

1. Настройте прослушиватель.

Это для mousemove мероприятие.

$document.mousemove(rotateScene);

2. Рассчитайте вращение.

Я хотел, чтобы книга вращалась между -15 и 15 градусами в зависимости от того, где находится мышь по оси x. Это можно рассчитать, используя следующее:

rotationY = -15 + (30 * e.pageX / $body.width());

3. Примените вращение.

$scene.css('transform': 'rotateY(' + rotationY + 'deg)');

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

1. Настройте прослушиватель.

window.addEventListener('deviceorientation', rotateScene, false);

2. Определите ориентацию.

Прежде чем мы сможем рассчитать поворот, нам нужно знать, находится ли устройство в альбомном или портретном режиме. Это можно определить, оценив window.orientation:

  • Пейзаж Math.abs(window.orientation) == 90
  • Портрет window.orientation == 0


Определите ориентацию устройства, оценив window.orientation.

3. Рассчитайте вращение.

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

var theta = (Math.abs(window.orientation) == 90) ? e.beta : e.gamma;
rotationY = 0 + (15 * (theta / -45));


То deviceorientation событие позволяет нам тянуть alpha, beta а также gamma значения вращения. Обратите внимание, что эти значения относятся к текущей ориентации устройства. На изображении выше показаны оси телефона, удерживаемого перпендикулярно земле в портретном режиме.

4. Примените вращение.

$scene.css('transform': 'rotateY(' + rotationY + 'deg)');

Вывод № 2: Сортировка по глубине печально известна своими ошибками

Ряд браузеров поддерживают 3D-преобразования, но немногие делают это элегантно. Помимо общих проблем с эффективностью, самым большим препятствием является неправильная сортировка по глубине.

Сортировка по глубине требуется, когда две плоскости пересекаются в трехмерном пространстве. Механизм рендеринга должен определить, какая плоскость (или, точнее, какие области плоскости) должна быть визуализирована, а какие должны быть обрезаны.


Глубина сортировки различается в разных браузерах.

К сожалению, каждый браузер реализует сортировку по глубине по-разному и, следовательно, имеет свои проблемы. Лучшее, что мы можем сделать для борьбы с глючным всплывающим окном базовых элементов, — это держать плоскости подальше друг от друга.

Веб-сайт Beecamp включает в себя многочисленные пересечения самолетов. Изначально у меня все страницы вращались вокруг одной и той же точки в 3D-пространстве (0, 0, 0). Это означало, что почти каждый самолет в книге боролся за лидерство. Чтобы противостоять этому, страницы нужно было расположить так, как если бы они были рядом друг с другом вдоль корешка настоящей книги. Я сделал это, вращая страницы по дуге, с открытой страницей на вершине.


Вращение страниц вокруг дуги помогает предотвратить обрезку.

function updateDrag(e) {
    …
    // operate on each spread
   $('.spreads li').each(function(i) {
        // calculate the angle increment
        var ANGLE_PER_PAGE = 20;

        // determine which slot this page should be turned to
        var offsetIndex = per < 0 ? 5 + curPageIndex - i : 5 + curPageIndex - i - 2;

        // calculate the angle on the arc this page should be turned to
        var offsetAngle = per < 0 ? offsetIndex - per - 1 : offsetIndex - per + 1;

        // calculate the x coordinate based on the offsetAngle
        var tarX = 5 * Math.cos(degToRad(offsetAngle * ANGLE_PER_PAGE + 10));

        // calculate the z coordinate based on the offsetAngle
        var tarZ = 5 * Math.sin(degToRad(offsetAngle * ANGLE_PER_PAGE + 10));

        // position the page
        $(this).css('transform', 'translateX(' + tarX.toFixed(3) + 'px) translateZ(' + tarZ.toFixed(3) + 'px)');
    });
}

Этот метод помог решить большинство проблем сортировки по глубине, но не все. Дальнейшая оптимизация действительно зависит от поставщиков браузеров. Похоже, что в Safari все работает как на настольных компьютерах, так и на мобильных устройствах. Chrome Stable немного борется, но последняя версия Canary работает прекрасно. Firefox отлично справляется со своей задачей, но страдает низкой частотой кадров. Сейчас трудно победить.

Вывод № 3: векторное пространство сложно, но полезно

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

Магия программирования механики всплывающих окон заключается в расчете векторного пространства. Вектор — это, по сути, линия. Зная длины и направления линий, мы можем выполнять над ними операции. В частности, при создании всплывающих окон используется векторное перекрестное произведение, представляющее собой линию, проходящую перпендикулярно двум другим линиям в трехмерном пространстве.

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


Векторное векторное произведение в действии.

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

На мой взгляд, это не совсем простая математика, но она чрезвычайно полезна. Если вам интересно поиграть с векторами, я настоятельно рекомендую Sylvester. Это действительно упрощает векторную математику.

function setFold() {
    var points = [];

    // origin
    points[0] = [0, 0, 0];

    var adj = Math.sqrt(Math.pow(POPUP_WIDTH, 2) - Math.pow(POPUP_WIDTH * Math.sin(degToRad(-15)), 2));

    // left piece: bottom outside
    points[1] = [-adj * Math.cos(degToRad(-180 * fold)), adj * Math.sin(degToRad(-180 * fold)), POPUP_WIDTH * Math.sin(degToRad(-15))];

    // right piece: bottom outside
    points[2] = [adj * Math.cos(degToRad(-180 * 0)), POPUP_WIDTH * Math.sin(degToRad(-180 * 0)), POPUP_WIDTH * Math.sin(degToRad(-15))];

    // left piece: top inside
    points[3] = [-POPUP_WIDTH * Math.cos(degToRad((-180 * fold) - 90)), POPUP_WIDTH * Math.sin(degToRad((-180 * fold) - 90)), 0];

    var len = Math.sqrt(Math.pow(points[1][0], 2) + Math.pow(points[1][1], 2) + Math.pow(points[1][2], 2));

    // normalize the vectors
    var normV1 = $V([points[1][0] / len, points[1][1] / len, points[1][2] / len]);
    var normV2 = $V([points[2][0] / len, points[2][1] / len, points[2][2] / len]);
    var normV3 = $V([points[3][0] / len, points[3][1] / len, points[3][2] / len]);

    // calculate the cross vector
    var cross = normV1.cross(normV2);

    // calculate the cross vector's angle from vector 3
    var crossAngle = -radToDeg(cross.angleFrom(normV3)) - 90;

    // transform the shape
    graphic.css('transform', 'translateY(' + depth + 'px) rotateZ(' + zRot + 'deg) rotateX(' + crossAngle + 'deg)');
}

Вывод № 4: SVG полностью трубчатый

Я знаю, я знаю: вы уже слышали доводы в пользу SVG. Что ж, вы еще услышите это. SVG — невероятная технология, которая очень хорошо работает в 3D-пространстве. Все иллюстрации на сайте Beercamp были сделаны в Illustrator и экспортированы в SVG. Это давало множество преимуществ.

Преимущество 1: Размер

Поскольку всплывающие элементы требовали больших областей прозрачности, экономия размера файла SVG была огромной. Эквиваленты PNG были бы на 200–300% больше, чем несжатые SVG. Однако мы можем еще больше уменьшить размер файла, экспортируя иллюстрации в формате SVGZ.

SVGZ — это сжатая версия SVG, которая невероятно мала. Фактически, файлы SVGZ для Beercamp на 900% меньше, чем их эквиваленты PNG! Однако их реализация требует некоторой настройки сервера. Это можно легко сделать с помощью .htaccess файл:

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

Преимущество 2: гибкость

Гибкость SVG, пожалуй, является его наиболее заметным преимуществом. Графика на веб-сайте Beercamp масштабируется в трехмерном пространстве, чтобы заполнить окно браузера. На каждой странице также есть горячие точки, которые позволяют пользователю увеличивать масштаб для получения более подробной информации. Поскольку все обрабатывается с помощью SVG, иллюстрации остаются четкими и чистыми независимо от того, как они манипулируются в трехмерном пространстве.


Файлы SVG по своей природе отзывчивы.

Преимущество 3: автономная анимация

Все SVG на сайте Beecamp реализованы как фоновые изображения. Это помогает поддерживать чистоту разметки и позволяет повторно использовать изображения в нескольких местах, например, во всплывающих окнах. Однако это означает, что мы теряем доступ к DOM для каждого из узлов. Итак, что, если нам нужна анимация на фоне SVG?

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

Анимация SVG вызывает меньше шума, чем ее двоюродный брат CSS, но она столь же функциональна. Внутри элемента мы можем добавить узел анимации, чтобы указать типичные настройки анимации: свойства, значения, время начала, продолжительность, количество повторов и т. д. Ниже приведен отрывок из одного из пузырей Beercamp.

<circle fill="#fff" opacity=".4" clip-path="url(#right-mug-clip)" cx="896" cy="381" r="5">
    <animate attributeType="XML" attributeName="cx" from="890" to="881" begin="7s" dur="5s" repeatCount="indefinite" />
    <animate attributeType="XML" attributeName="cy" from="381" to="100" begin="7s" dur="5s" repeatCount="indefinite" />
</circle>

Вывод № 5: экспериментировать сложно, но важно

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

Легко запутаться в реальности разработки веб-сайтов, которые являются адаптивными, кроссплатформенными, кроссбраузерными, изящно деградирующими, семантически совершенными, прогрессивно улучшенными, _______, _______ и _______ (место, чтобы заполнить будущие модные словечки). Эти методы полезны на рабочих веб-сайтах для обеспечения охвата и согласованности, но они также могут ограничивать нашу креативность.

Я буду первым, кто признает это: сайт Beecamp глючит. Поддержка браузеров ограничена, а удобство использования можно улучшить. Тем не менее, сайт является экспериментом. Он предназначен для изучения того, что возможно, а не удовлетворения того, что практично.

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

Состояние CSS 3D

CSS 3D еще не достиг переломного момента. Браузеры просто не поддерживают его достаточно хорошо, но на горизонте есть надежда. Мобильный Safari с аппаратным ускорением рендерит 3D-преобразования очень быстро и с минимальными проблемами сортировки по глубине. Это только вопрос времени, когда другие производители выпустят стабильные реализации. Будет интересно посмотреть, как методы CSS 3D выдержат другие новые технологии, такие как WebGL.

Помните Флэша? И я нет.

Вы приглашены

Кстати, nclud бросает Beercamp на конференцию Front-Trends в Варшаве. Если вы направляетесь на конференцию, вы должны зайти и поздороваться!

  • «Введение в CSS 3-D Transforms», Дэвид ДеСандро, 24 Ways Хороший учебник по CSS 3D.
  • Анимация, W3C
  • Сильвестр Эта библиотека JavaScript упрощает векторную и матричную математику.
  • Beercamp 2011 Прошлогодний веб-сайт Beercamp, созданный Дэйвом ДеСандро.
  • Конференция Front-Trends пройдет с 26 по 27 апреля 2012 года в Варшаве, Польша.
Сокрушительная редакция
(аль)




Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Beercamp: Эксперимент с CSS 3D

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»