Скролл страницы по секциям с использованием колеса мыши

Плагин называется One Page Scroll - благодаря ему вы можете превратить свою страницу в целый слайдер. Похожий вариант реализован на сайте Apple где презентован новый iPhone 5s.

Для работы на понадобятся всего лишь подключить jQuery, jquery.onepage-scroll.js и onepage-scroll.css в тег head, а далее сформировать подобную структуру:

html

Код
<body>
  ...
  <div class="main">
  <section>...</section>
  <section>...</section>
  ...
  </div>
  ...
</body>

Настройки плагина:

Код
$(".main").onepage_scroll({
  sectionContainer: "section", // контейнер, к которому будет применяться скролл
  easing: "ease", // Тип анимации "ease", "linear", "ease-in", "ease-out", "ease-in-out"
  animationTime: 1000, // время анимации
  pagination: true, // скрыть или отобразить пагинатор
  updateURL: false // обновлять URL или нет
});

Вот и всё.

Публичные методы

$.fn.moveUp()

Данный метод позволяет сменять секции одну за другой - наверх. Эквивалент:

Код
$(".main").moveUp();

$.fn.moveDown()

Смена секций вниз. Эквивалент:

Код
$(".main").moveDown();

  • FalleN

  • 5059

  • 1

  • 330

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

Добавить комментарий:

Для добавления вы должны авторизироваться!