Базовая инструкция по использованию фишек
Как работать с консолью?

Во многих фишках необходимо узнать id конкретного элемента. Вы поймёте это, когда увидите в коде "data-elem-id..". В этом пункте рассматривается, как это сделать:
Шаг 1.

Нужно нажать правой кнопкой мыши на интересующий нас элемент (лучше делать это на опубликованной странице). Далее в зависимости от вашего браузера нужно выбрать "просмотреть код" (Chrome), "проверить объект" (Safari) или "исследовать элемент" (Firefox).

Если в Safari у Вас нет такого варианта, нужно включить меню разработчика:
меню -> настройки -> разработка -> галочка «Показать меню «Разработка» в строке меню».
Google Chrome
Safari
Mozilla Firefox
Шаг 2.

Перед вами откроется консоль, в которой будет подсвечен выбранный элемент.
Google Chrome
Safari
Mozilla Firefox
Шаг 3.

Нужный нам data-elem-id находится не в подсвеченной строке, а выше:
Google Chrome
Safari
Mozilla Firefox
Шаг 4.

Копируем цифры и вставляем их в код. Готово, вы великолепны!
Самопроверка!

Предлагаем вам потренироваться на кнопке ниже. Найдите её data-elem-id, вставьте в поле и нажмите на кнопку.
Проверить
Нестандартные селекторы

В некоторых случаях вместо бесконечного использования data-elem-id для каждого элемента можно использовать более общие селекторы: «все ссылки на странице», «все картинки в таком-то блоке» и т.п.

Это может быть использовано, например, в фишке «появление фото из угла»: можно указать, что эта анимация должна распространяться на все картинки в блоке #rec12345678.

Для указания ссылок или картинок используются соответственно селекторы «a» или «img». В таком случае будут указаны все ссылки или картинки на странице.
Для указания ссылок или картинок внутри определенного блока соответствующий селектор пишется после id блока: например, для указания всех трех картинок из последнего шага инструкции выше, можно использовать селектор «#rec271922871 img».

Использование таких селекторов может существенно упростить настройку фишек, которые поддерживают их использование.

Работа с svg

В некоторых фишках используются коды svg-изображений. В этом пункте на примере с фишкой «вырисовка надписи вектором» показано, как их получить и использовать.

Для начала должно быть создано нужное svg-изображение. В нашем примере это надпись. Чтобы в фигме преобразовать надпись в svg, нужно нажать на нее правой кнопкой мыши и выбрать «Outline stroke». Затем мы экспортируем полученный векторный элемент в формате svg.

После получения svg-файла нам нужно получить код изображения: для этого нужно открыть этот файл в любом текстовом редакторе (например, в «Блокноте» для Windows или «Text edit» для Mac OS).

После этого перед нами откроется файл с кодом. На данном этапе необходимо проверить, подходит ли этот код требованиям фишки: если фишка «вырисовка надписи вектором» требует svg с несколькими элементами «path», то фишка «вырисовка вектора» пример svg только с одним «path»!

Когда мы удостоверились, что код подходит — можно смело копировать его целиком и вставлять в настройки фишки!

Работа с css-стилями

В некоторых фишках используются стили css. Разберем их использование на примере настройки фишки «Замена курсора».

Основными используемыми в фишках стилями являются:
  • width — ширина
  • height — высота
  • border — рамка
  • border-radius скругление краев
  • color — цвет
  • backgroud-color — цвет фона

Все подробности их использования или другие стили можно нагуглить. Выделим только такую хитрость: вместо цвета (который обычно пишется в hex-формате) можно поставить 'transparent', чтобы получить прозрачность (например, в фишках с кнопками).

В примере для настройки замены курсора мы применяем стили ширины, высоты, рамки и ее скругления, чтобы получить курсор в виде кружка, который увеличивается в два раза (с 16px до 32px) при наведении на картинку (выбранную по селектору .t-bgimg).


<script>
    cursorChange_init({                         
        minWidth: 1200
        numStates: 1,
        hasNewNormalStyle: true,
        mixBlendMode: true,
        isCursorHidden: true,
        sourceOfNormal: "external",
        normalStyle: {                              // стиль основного состояния
            width: '16px',                          // ширина 16 пикселей
            height: '16px',                         // высота 16 пикселей
            'border': '1px solid white',            // сплошная белая рамка 1 пиксель толщиной
            'border-radius': '50%'                  // скругление до идеального круга
        },
        triggers: ['.t-bgimg'],       
        stateStyles: [
            {                                       // стиль дополнительного состояния
                width: '32px',                      // ширина 32 пикселя
                height: '32px'                      // высота 32 пикселя
            }
        ]
    })
</script>
Работа с easing functions

В некоторых фишках можно задать свою кривую анимации (easeFunction). В CSS существует несколько стандартных кривых:
  • linear
  • ease
  • ease-in
  • ease-out
  • ease-in-out
Кроме стандартных кривых вы можете задать любую кастомную кривую, которую можно задать с помощью свойства cubic-bezier. Для этого вам необходимо сгенерировать эту кривую — можно воспользоваться сайтом cubic-bezier.com. Алгоритм работы следующий:
  1. С помощью рычажков задаете кривую анимации
  2. Можно сравнить ее со стандартными функциями (задать длительность, выбрать стандартную для сравнения, нажать GO!
  3. Нажать COPY рядом со сгенерированной кривой
  4. Вставить скопированную строку в параметр easeFunction в настройке фишки

Если у вас возникли сложности, посмотрите алгоритм обращения за помощью и напишите Серёже в тех.поддержку,
кликнув по кнопке ниже: