onepage-scroll — скролл для сайта в виде слайдера

Сейчас большую популярность набирают сайты с необычным скроллом. Сегодня я вам покажу как сделать слайдер-скролл для сайта. Для данного эффекта есть готовое решение — плагин 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"