Сейчас большую популярность набирают сайты с необычным скроллом. Сегодня я вам покажу как сделать слайдер-скролл для сайта. Для данного эффекта есть готовое решение — плагин onepage-scroll .
onepage-scroll — https://github.com/peachananr/onepage-scroll
Для того чтобы плагин начал работать необходимо подключить сам плагин и библиотеку jquery.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/jquery.onepage-scroll.min.js"></script>Блок с классом main основной блок, внутри которого должны располагаться блоки сладов. Сами слайды размещаются внутри элементов section.
В самом низу нужно разместить jquery код
$(".main").onepage_scroll({
sectionContainer: "section", /*указывает контейнер для слайда*/
pagination: true, /*добавляет пагинацию*/
loop: false, /*указывает что*/
keyboard: true, /*задает возможность пролистывания с помощью клавиатуры*/
});Вот так просто добавляется данный эффект. Теперь давайте рассмотрим дополнительные параметры.
Дополнительные параметры
Все дополнительные параметры задаются внутри функции onepage_scroll.
$(".main").onepage_scroll({
/*ЗДЕСЬ ВЫ ПЕРЕЧИСЛЯЕТЕ ПАРАМЕТРЫ И ИХ ЗНАЧЕНИЯ(ЧЕРЕЗ ЗАПЯТУЮ)*/
});sectionContainer
Задает блок для слайдов. Обычно для этого используют тег section.
sectionContainer: section,easing
Задает тип смягчения скролла. Вы можете выбрать один из 3 вариантов:
- ease — легкий скролл. Простой скролл, который используется по стандарту.
- linear — линейное смягчение.
- ease-in — ускоренное смягчение.
easing: ease-in,animationTime
AnimationTime позволяет определить, сколько времени занимает каждая секция для анимации.
animationTime: 1000,pagination
Вы можете либо показать, либо скрыть пагинацию. Переключатель true — чтобы активировать пагинацию, false — чтобы скрыть.
pagination: true,updateURL
Укажите значение true, если вы хотите, чтобы URL-адрес автоматически обновлялся при прокрутке каждой страницы. В окончание адреса страницы будет стоять номер блока на котором находится пользователь. Смена URL происходит без перезагрузки страницы.
updateURL: true,beforeMove и afterMove
beforeMove — эта опция принимает функцию обратного вызова. Функция будет вызвана перед перемещением страницы.
afterMove— эта опция принимает функцию обратного вызова. Функция будет вызвана после перемещением страницы.
Внутри обоих параметров необходимо указать функцию, которая должна выполняться.
beforeMove: function (index ) {}, // перед началом скролла
afterMove: function (index) {}, // перед началом скроллаloop
Включает циклическое перемещение по слайдам. Нажимая вниз на последнем слайде вы перемещаетесь на первый, и на оборот перемещаясь на первом вверх — оказываетесь на последнем.
loop: false,keyboard
Вы можете активировать элементы управления клавиатуры.
keyboard: true,responsiveFallback
Вы можете вернуться к обычной прокрутке страницы, определив ширину браузера, в котором вы хотите, чтобы отзывчивый резервный запуск. Например, установите для этого значение 600, и когда ширина браузера будет меньше 600, резервный режим будет работать. Или укажите false, чтобы данный эффект срабатывал всегда.
responsiveFallback: false,direction
Теперь можно определить направление анимации прокрутки одной страницы. Имеющиеся варианты «vertical «и » horizontal». По умолчанию используется значение «vertical«.
direction: "vertical"
