Comments 17
Нишевый продукт, без которого пользовательский опыт может вполне обойтись.
НО если бы я был голливудским кинорежиссером и снимал фильм про наемного убийцу, то обязательно ввел бы в ряд сцен ваш эффект на мониторе главного героя. Он ведет на компьютере картотеку заказов, после очередной успешной ликвидации открывает её, находит карточку почившей жертвы и кликает вожделенную кнопку [Удалить], после чего фотка исчезает с экрана под ваш эффект. Но так как рядом с этой кнопкой есть другая [Восстановить], то вокруг существования этой кнопки закручивается интрига - выясняется, что из 5-и последних жертв одна выжила и строит планы мести. Так к концу фильма и не выяснив, кто выжил, этот наемный убийца получает в свою квартиру гостя с того света, гость убивает своего несостоявшегося убийцу, открывает на его компе БД жертв, находит свою карточку без фотки и нажимает кнопку [Восстановить]. И фильм бы я назвал "Кнопка".
Как писал Чехов "Нельзя ставить на сцене заряженное ружьё, если никто не имеет в виду выстрелить из него".
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 — современные и эффектные анимации для веба