Comments 14
Добавьте атрибуты data-sticky или data-animation (с одиночными кавычками) в ваш элемент, вместе или раздельно.
Задайте параметры (с двойными кавычками внутри) для атрибутов data-sticky и data-animation по следующей схеме (для простоты, взглянем на нее в иерархическом виде).

А почему у атрибутов одинарные кавычки? Что мешает сделать двойные, а одинарные использовать в значении, плюс можно пропускать их для имён полей?

При разборе значение атрибута парсится как JSON а двойные кавычки это его стандарт.

В Adobe Animation (CreateJS) можно использовать layout c localToGlobal и наоборот. Какие у вас принципы лейаута?

Да понятно, что JSON замешан. Что мешало без него? Если по соображениям безопасности не хотите парсить eval-ом, то парсер подобный JSON-у пишется в 100 строк кода. При своём парсере можно и от кавычек в значении избавиться и от лишних фигурных скобок. Что удобнее:


<div data-sticky='{"from": "0", "duration": "200vh"}'></div>

или


<div data-sticky="from: 0, duration: 200vh"></div>
Тогда парсер споткнется о запятые внутри круглых скобок в таких значениях, как scale, translate, matrix и т.д.:
<div data-animation="transform: {
    10vh: translate(0, 50%),
    20vh: translate(0, 0)
}"></div>
Тогда парсер споткнется о запятые

С чего бы? Я про нормальный парсер, а не про сплит по запятым.

Буду благодарен, если порекомендуете – что почитать на данную тему.

Я учился ковыряя чей-то парсер, там довольно хороший пример был, но сейчас мне его уже не найти. Попробуйте поковырять мои парсеры. Вот этот тыц парсит биндинги в текстовых нодах вроде таких text {key.path.to.date |fdate('DD.MM.YYYY') |or('\u2014') } text. Кода многовато из-за возможности разбирать в тч. такие конструкции |formatter({key:[,,{'key':/r\\\e/g,},,]}), то есть любая вложенность объектов/массивов, висячие запятые и пустые значения в массивах, ключи с кавычками и без, регулярки, экранирование в строках и регулярках, спецсимволы и тд… Ещё один парсер тыц, парсит вот такое дело: https://i.imgur.com/7O07D0F.png .

Я заметил, что вы вручную проверяете попал ли элемент в область видимости. Возможно, стоит обратить внимание на IntersectionObserver

При инициализации единоразово создаётся таблица (animation.list) с позициями отслеживаемых элементов, и обработчик события скролл работает непосредственно с ней. Но верно, при скролле происходит обзор этой самой таблицы.
Intersection Observer API отличное решение, но в Safari поддержку добавили только в конце марта 2019, отсюда сомнения, не рано ли. Думаю, можно проверять поддержку браузером и тогда решать как отслеживать. Спасибо, обдумаю такой сценарий.
Опробовал следующую схему c Intersection Observer:
Элемент пересекает viewport – начинаем слушать его событием window scroll.
Элемент полностью покидает viewport – удаляем связанный с ним слушатель.

Проблема следующая. Если элемент изначально находится полностью за пределами viewport по горизонтальной оси или же в процессе анимации/трансформации окажется там, Observer никогда не обнаружит данный элемент (при вертикальном скролле).
image
Горизональный rootMargin не помогает, если у родителя элемента указан overflow: hidden.
image

Делая такие анимации вы ломаете пользовательский опыт. Пользователь перестаёт ощущать контроль на скроллом, ведь он начинает веси себя непредсказуемым образом.

Only those users with full accounts are able to leave comments. Log in, please.