Хабр Курсы для фронтендеров
РЕКЛАМА
Большая витрина: от крупнейших школ до частных авторов. Сравнивайте по цене, длительности, формату и выбирайте самый подходящий курс!
Поток Фронтенд доступен 24/7 благодаря поддержке друзей Хабра
Комментарии 17
Disable Transitions тут не поможет: он глушит CSS, а эффект работает на WebGL2 и element.animate() — до них CSS не дотягивается. uBlock сработает, но грубо: он просто заблокирует весь JS страницы.
Рубить под корень и не нужно — библиотека сама читает prefers-reduced-motion. С включённым «уменьшением движения» анимация пропускается до захвата и до WebGL: ни снимка, ни рендера, ни звука. Элемент всё равно удаляется и возвращается, просто мгновенно.
Одна системная галка, сразу на всех сайтах:
macOS — Системные настройки → Универсальный доступ → Монитор → Уменьшение движения
iOS/iPadOS — Настройки → Универсальный доступ → Движение → Уменьшение движения
Windows 11 — Параметры → Специальные возможности → Визуальные эффекты → Эффекты анимации
Android — Настройки → Специальные возможности → Удалить анимации
GNOME — Настройки → Специальные возможности → Уменьшить анимацию
На здоровье! 😊
Я и не говорил, что поможет: мусорный js чаще всего берётся со всяких cdn и режется uBO.
И таки DE/WM под linux больше одного, а то ваша нейронка, видимо, не в курсе.
Вы где в реальной жизни видели чтоб js с cdn тянулся? Эта практика умерла кучу лет назад
Если правильно понял ваш вопрос: я практически нигде не видел, чтобы он не тянулся, тот же хабр это делает.
Где? Весь код хабра тянется с хабра, кроме яндекс
Например, cdn.skcrtxr.com.
На вашем скрине unpkg - это тоже cdn с js.
А чей это конкретно код, хабра или не хабра, мне лично неинтересно.
Это ровно единстенный такой скрипт. И это костыль для старых браузеров.
Такой или не такой - нет, далеко не единственный: я вам скинул пример выше, но тянется гораздо больше, включая трекеры яндекса и гугла (я даже яндекс из /etc/hosts убрал, чтобы проверить).
Я не понимаю, что вы мне пытаетесь доказать. Хабр тянет js с cdn, это факт. Напрямую или нет, и сколько его, - дело десятое.
Эффект классный, но без нативного способа рендерить DOM на canvas - это жесть, если подумать, что под капотом. snapdom фактически имитирует CSS, HTML рендер на JS, т.е. кусок уже гигантского существующего функционала браузера и потом рисует это примитивами на канве...
UPD: Ok, там хак с SVG https://stackoverflow.com/questions/12652769/rendering-html-elements-to-canvas
snapdom не переписывает рендер CSS на JS. Он делает копию элемента, вписывает в неё все вычисленные стили, подставляет картинки и шрифты прямо в разметку, кладёт всё это внутрь SVG (foreignObject) и отдаёт браузеру как обычную картинку. Дальше верстает и рисует движок браузера, сам, как обычно. JS тут только собирает картинку, а не рисует её.
Вручную, примитивами по канве, рисует html2canvas — snapdom как раз делали ему на замену.
А вот что нативного способа нарисовать DOM на канве нет — это правда. element() есть только в Firefox, поэтому весь этот огород и существует.
Ну и capture в либе подменяемый, snapdom просто дефолт.
очень красиво! интересные идеи!
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Vanilla Disintegrate — современные и эффектные анимации для веба