StickyMate — frontend анимация из HTML разметки

    Stickymate это инструмент, который поможет веб-разработчикам создавать scroll-based анимации без знания JavaScript, задавая параметры прямо в HTML разметке. Stickymate позволяет поймать элемент на экране и анимировать его во время прокрутки страницы.

    Демо
    Readme на русском
    Проект на GitHub

    Установка:
    Скачать и распаковать, или
    $ npm install stickymate

    Использование:
    <div data-sticky="from: 0, duration: 100vh"></div>

    <div data-animation="opacity: {-100vh: 0, -50vh: 1}"></div>

    <div data-classes="-50vh: {add: class3, remove: class1 class2}"></div>

    Комментарии 14

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

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

        0

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

          0

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

            +1

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


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

            или


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

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

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

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

          +1

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

            0
            При инициализации единоразово создаётся таблица (animation.list) с позициями отслеживаемых элементов, и обработчик события скролл работает непосредственно с ней. Но верно, при скролле происходит обзор этой самой таблицы.
            Intersection Observer API отличное решение, но в Safari поддержку добавили только в конце марта 2019, отсюда сомнения, не рано ли. Думаю, можно проверять поддержку браузером и тогда решать как отслеживать. Спасибо, обдумаю такой сценарий.
              +1
              Можно попробовать полифил — github.com/w3c/IntersectionObserver/tree/master/polyfill
              Если поддерживается браузером, то работает встроенная реализация, если нет, то включается полифил. В IE и старых safari работает
                0
                Опробовал следующую схему c Intersection Observer:
                Элемент пересекает viewport – начинаем слушать его событием window scroll.
                Элемент полностью покидает viewport – удаляем связанный с ним слушатель.

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

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

            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

            Самое читаемое