Регистрация
3 августа 2020 в 22:20

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>
    Теги:
    Хабы:
    Реклама
    Баннер исчез, но на прощание оставил коллекцию по работе с продуктами от Microsoft Посмотреть

    Похожие публикации

    Вакансии

    Больше вакансий на Хабр Карьере
    Реклама
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее

    Комментарии 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

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

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

            Что обсуждают

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

            Ваш аккаунт

            Разделы

            Информация

            Услуги

            © 2006 – 2021 «Habr»
            Настройка языка
            О сайте
            Служба поддержки
            Мобильная версия