Примеры режимов работы кнопки

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

Плавающая кнопка по умолчанию

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

Кнопка с видео

Поведение кнопки аналогично кнопке по умолчанию, но при нажатии на кнопку происходит воспроизведение видео (с «автозапуском», в том числе и на мобильных браузерах).

Данный режим задается при указании параметра "ButtonContentType":"video"

Кнопка со скролл-зонами

Поведение кнопки аналогично кнопке по умолчанию, но вся высота страницы разбивается на зоны, внутри которых может менятся изображение кнопки, ее размеры и режим.

Данный режим задается при указании параметра "ButtonType":"button_and_scroll_zones" и указания настроек скролл-зон (объект ScrollZones настроек)

Кнопка c активными зонами

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

Данный режим задается при указании параметра "ButtonType":"button_and_active_zones" и указания настроек активных зон (объект ActiveZones настроек)

Кнопка-меню

Поведение кнопки аналогично кнопке по умолчанию, но после нажатия отображается меню из нескольких пунктов, с различными ссылками-действиями для каждого из пунктов.

Данный режим задается при указании параметра "ButtonType":"menu" и указания настроек меню (объект MenuItems настроек)

Также для меню возможно включить режим радиального меню используя параметр "MenuTemplateVariant":"radialcorner"

Фуллскрин

После загрузки страницы и скрипта кнопки в модальном окне отображается страница ContentURL

Smartbanner

Вместо кнопки показывается смартбаннер (на основе https://github.com/jasny/jquery.smartbanner )

Анимации кнопки

Opacity

Анимация смены прозрачности кнопки.

Используемые параметры:

  • isAnimation
  • animationDuration

В частности задается как isAnimation = opacity_0.5 в формате opacity_<конечное значение>

Начальное значение прозрачности соответственно устанавливается через ButtonOpacity параметр

Демо страница - http://demo.viewst.com/button_example/opacity_animation

rollout

Анимация, при которой кнопка «выдвигается» по мере скролла страницы

Используемые параметры:

  • isAnimation
  • animationDuration

В частности задается как isAnimation = rollout_left в формате rollout_<сторона>, где сторона - опциональна и может принимать значения left или right

И возможно указать сторону из которой будет «выдвигаться» кнопка и максимальную ширину «выдвижения» (в процентах), в частности rollout_<сторона>_<ширина> к примеру rollout, rollout_left, rollout_left_60

Демо страницы:

lookout

кнопка периодически исчезает и появляется из-за края экрана.

Используемые параметры:

  • isAnimation
  • animationDuration

В частности задается как isAnimation = lookout_left в формате lookout_<сторона>, где сторона - опциональна и может принимать значения left или right

forwardAndBack

Кнопка перемещается от левого края до правого, затем обратно до левого.

Используемые параметры:

  • isAnimation
  • animationDuration

Пример:

forwardStopAndAway

Кнопка перемещается из-за левого края до середины экрана, останавливается и затем перемещается за правый край экрана. Длительность каждого этапа задается параметром animationDuration

Используемые параметры:

  • isAnimation
  • animationDuration

Пример: