Благодаря плагину 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()
Данный метод позволяет сменять секции одну за другой - наверх. Эквивалент:
$.fn.moveDown()
Смена секций вниз. Эквивалент:
Код
$(".main").moveDown();
