Анимация

*Инструмент анимации доступен только на платных тарифах.

В Setka Post Editor можно анимировать абзацы текстов, изображения, инфографику. Анимация применяется к параграфу, картинке, сетке.

Кликните на элемент (сетку, изображение, абзац текста), функционал анимаций находится во вкладке Параграф, Изображение или Сетка в зависимости от выбранного вами элемента.

Screen_Shot_2019-07-05_at_12.42.21.png

Вы можете делать и двойную анимацию: например, если у вас сетка, а внутри нее изображение, вы можете сделать сложную анимацию – отдельную для каждого элемента.

Шаблоны анимаций

Если вы еще только начинаете знакомиться с анимациями, или же хотите быстро получить анимированный элемент, не тратя времени на настройку анимации вручную, мы рекомендуем вам воспользоваться шаблонами анимаций.

Screen_Shot_2019-07-05_at_12.46.46.png

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

Выбор эффекта:

Screen_Shot_2019-07-05_at_12.51.15.png

Выбор поведения элемента:

Screen_Shot_2019-07-05_at_12.51.30.png

Также можно выбрать из специальных эффектов более сложную и необычную анимацию. Специальные эффекты:

Screen_Shot_2019-07-05_at_12.51.42.png

Для предпросмотра анимации можно нажать или на значок логотипа Setka Editor в панели анимаций, или на кнопку «Тест».

Screen_Shot_2019-07-05_at_12.52.00.png

Для всех шаблонов анимации можно выбрать вариант появления:

Screen_Shot_2019-07-05_at_13.34.33.png

 - при появлении на экране (анимация начнет работать, когда 10% анимированного элемента будут в зоне видимости на экране);

 - при ховере на анимированный элемент;

 - при клике на анимированный элемент;

- при скролле (анимация будет работать в процессе скролла). Для этого типа старта анимации можно дополнительно выбрать, в какой области экрана будет работать анимация.

Настройка анимации вручную

Анимации можно задать направление движения (вправо-влево, вниз-вверх), настроить первый кадр — чтобы он увеличивался, сдвигался или поворачивался. Вы можете настроить длительность и задержку начала анимации. Настройка прозрачности позволит добиться эффекта, что в начале анимации элемент будет не виден на экране и будет постепенно проявляться.

Screen_Shot_2019-07-05_at_13.44.30.png

Настройки старта анимации и возможности ее предпросмотра такие же, как для шаблонов анимации, описанных выше.

Эффект прилипания

Настроив sticky эффект, вы сможет закреплять на странице те или иные фрагменты контента — они будут оставаться статичными в процессе прокрутки поста: выбранный элемент «залипает», когда область просмотра достигает определённой позиции. 

Чтобы воспользоваться функцией, необходимо выбрать элемент, который вы хотите сделать статичным, перейти в меню анимации и найти там вкладку «Прилипание»: здесь вы сможете выбрать предпочтительное расположение элемента (верхняя или нижняя часть экрана, а также размер отступов от края экрана).

Screen_Shot_2020-03-27_at_14.14.11.png

Закрепление важных фрагментов — задача, которая все чаще встает перед редакторами сайтов и блогов: например, закрепленное оглавление материала облегчает пользователю навигацию, элементы CTA, мотивирующие пользователя совершить то или иное действие (купить, скачать, подписаться на рассылку), более эффективны и лучше стимулируют клики, если постоянно зафиксированы на странице, а подсказки лучше работают, когда пользователь может обратиться к ним на любой стадии чтения.