TGViewer
Веб-страница Веб-страница @tproger_web · 22.3K subscribers
Post #6601 1.48K
Перелистывание веб-журнала можно собрать из живого HTML

Эффект загиба страницы обычно рисуют через Canvas или WebGL. Если содержимое превращается в картинку, выделение текста и работа ссылок требуют отдельного решения. В эксперименте с `<hic-pageflip>` автор использует HTML-in-Canvas, чтобы передать живые DOM-элементы в графику.

Внутри компонента страницы задаются тегами <hic-pageflip-page>. Для объёмного загиба используется WebGL, а управление доступно через методы next(), previous() и goToPage(). В демо можно выделять текст и переходить по ссылкам на странице.

Технология ещё меняется. Для просмотра нужен Chrome с флагом canvas-draw-element, поэтому сейчас это материал для прототипа и знакомства с API. Доступность и работу ввода придётся проверять отдельно, если решите повторить эксперимент.
  • ❤ 3
More from @tproger_web
  1. Oct 13, 2026W3C убрал лишние обёртки из своей дизайн-системы Правила отступов, удобные для фиксированн…
  2. Oct 13, 2026Cookies удалены, а браузер всё ещё узнают Удаление cookies не обязательно делает браузер н…
  3. Oct 13, 2026Общая папка для работы Claude Code и Codex Луи-Франсуа Бушар собрал заметки, инструкции-ск…
  4. Oct 13, 2026Post #6606
  5. Oct 13, 2026Почему горизонтальная прокрутка мешает закрепить заголовок таблицы Таблице задали overflow…
  6. Oct 13, 2026Chrome начал открывать JPEG XL: где пригодится новый формат В Chrome 155 появилась поддерж…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →