Cotonti сайт своими руками / Расширения / Навигация и структура

ScrollTo плагин Cotonti

14.03.2019 175

ScrollTo плагин под Cotonti - это расширение для вывода блока с кнопками скроллинга вверх вниз по странице. Появляются две кнопки, по клику на одну из них, экран прокручивается в ту сторону, в которую направлена стрелочка. Активная кнопка подсвечивается одним цветом, неактивная другим. Можно настроить различные параметры.

Для корректной работы плагина у вас должна быть установлена версия Cotonti не ниже чем 0.9.19, так как в нём используются новые возможности, появившиеся в этой версии движка.

ScrollTo плагин скроллинга вверх вниз

Особенности плагина ScrollTo

  • Плагин легковесный, имеет минимум кода.
  • Не требует интеграции, работает глобально.
  • Кнопки создаются в css с помощью border.
  • Можно изменять рамер кнопок в настройках.
  • Есть возможность вставить своё изображение стрелки в админке.
  • При вводе чисел используется новый формат вывода (type=number).
  • При выборе цвета используется новый формат вывода (type=color).
  • Можно выбрать цвет и прозрачность не только для кнопок, а и для состояния (hover, disabled).
  • Скроллинг имеет настраиваемые параметры плавности и шага прокрутки.
  • Настраиваются горизонтальное расположение и отступы.
  • Настраиваются вертикальное расположение и отступы.

Установка плагина ScrollTo

  1. Скачать архив, распаковать. Переименовать папку с плагином в scrollto, залить в корневой каталог для плагинов (по умолчанию /plugins/). 
  2. Перейти в « Управление сайтом / Расширения / Кнопки скроллинга вверх вниз » и установить.
  3. Настройка по желанию.

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

Настройки плагина ScrollTo: КОНФИГУРАЦИЯ

Размер кнопок: числовой параметр от 10 до 48, чем больше число тем больше кнопка, для кнопок по умолчанию (через border) и для добавляемого изображения считается по-разному, поэтому нужно смотреть визуально
Скорость скроллинга: задержка в миллисекундах для прохождения шага скроллинга от 0 до 40
Шаг скроллинга: высота прокручиваемой за один шаг области от 0 до 80
Координата начала активности кнопки сверху и снизу: указывает с какого момента кнопка скроллинга становится активной, если 0 - то алгоритм по умолчанию (1/2 высоты экрана), или заданное число
Изображение в формате base 64:

чтобы вместо стрелок через border показывалось ваше изображение, нужно сконвертировать его в формат image base 64 и вставить в поле.

Изображение должно смотреть стрелкой вверх (стрелка вниз подставится автоматически через отражение в css), желательный формат png или gif

ПОЗИЦИОНИРОВАНИЕ КНОПОК СКРОЛЛИНГА

Горизонтальное расположение блока кнопок: выбирается расположение относительно экрана, слева или справа
Горизонтальный отступ от края: отступ от края экрана, к которому прижат блок
Вертикальное расположение блока кнопок: выбирается расположение относительно экрана, сверху или снизу
Вертикальный отступ в %: смещение вертикально в процентах от выбранного в настройках выше вертикального расположения (снизу или сверху)

ЦВЕТ И ПРОЗРАЧНОСТЬ КНОПОК СКРОЛЛИНГА

Цвет кнопок: цвет кнопок скроллинга вверх и вниз
Цвет кнопки при наведении: цвет кнопки при наведении
Цвет неактивной кнопки: цвет нективной в данный момент кнопки (disabled)
Прозрачность кнопок: прозрачность кнопок от 0 до 1, при наведении всегда включается 1

Навигация и структура: «ScrollTo плагин Cotonti»

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

Близкие по теме «ScrollTo плагин Cotonti»

Нет записей