🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
#компонент дня
Bramus сделал — натуральное перелистывание страниц с загибами, тенями и всей этой физикой бумажной книжки. Сам эффект давно можно было сделать на Canvas/WebGL, проблема была в другом: содержимое страницы превращалось, по сути, в картинку. Прощай выделение текста, ссылки, accessibility и нормальный DOM.
Вот: Ссылка скрыта
Кстати, лет шесть назад уже был пост о подобном эффекте, прелесть той статьи — разложена вся геометрия: Ссылка скрыта
Но там не 3D, там clip-path и динамические тени.
А тут используется экспериментальный HTML-in-Canvas API: браузер умеет отрисовывать настоящий HTML через Canvas/WebGL, при этом исходные элементы остаются живыми DOM-элементами. Поэтому текст можно выделять, ссылки нажимаются, скринридеры продолжают видеть содержимое — а сверху на всё это можно навесить настоящее 3D-деформирование страницы.
Удобно? Не то слово!
Пока, правда, это работает в Chrome за флагом canvas-draw-element, а сам API ещё меняется. Но направление очень интересное. Нет никаких сомнений, что это попрёт за пределы экспериментов.
В лучших традициях Macromedia Flash!
#canvas #html #webgl #webgpu
