Прокрутка с эффектами анимации для отдельных страниц сайта (плагин WP FullPage)

Здравствуйте, сегодня поговорим о скрипте fullPage.js, который можно подключить к wordpress сайту с помощью плагина WP FullPage, для создания полноэкранной прокрутки с эффектами анимации для отдельных страниц сайта, в т.ч. главной страницы.

Скачать исходники для статьи можно ниже

PS: Статья в процессе написания…

Сразу же приведу примеры реальных сайтов, созданные с помощью данного плагина:

“moysport.ru”

“mi.com/shouhuan#07”

“saltaboombox.com.ar/#home”

“snapzheimer.org”

“moneytree.jp”

“newjumoconcept.com/en/#introduction”

“collection.madeofsundays.com/#about-us”

“wtfdesign.pl/#home”

“themify.me/demo/#theme=fullpane”

“mnogoblogtest.hostenko.com” (тестовый сайт, временный)

Плагин WP FullPage есть в официальном репозитории wordpress, поэтому установка стандартная – через админку (в левом меню выбираем пункт “Плагины” – подпункт “Добавить новый” – в строку поиска вводим WP FullPage), сведения о плагине:

Количество загрузок: 400

Последнее обновление: 2014-8-20

Страница плагина: “wordpress.org/plugins/wp-fullpage/”

Плагин не русифицирован.

Где взять информацию по настройкам плагина?

Документация по плагину WP FullPage (возможные запросы, классы): “docs.juzed.fr/wp-fullpage/”

Документация по fullPage.js: “github.com/alvarotrigo/fullPage.js#introduction”

Документация от разработчика скрипта fullPage.js: “alvarotrigo.com/fullPage/”

После установки и активации плагина WP FullPage в вашей админке появятся 3 новых пункта: FullPage, FullPage Sections, FullPage Slides, а также в пункте “Настройки” (Параметры) появиться подпункт WP FullPage:

Приступим к созданию Эффекта прокрутки для отдельной страницы сайта:

Начнем с того, что рассмотрим структуру страницы FullPage:

Страница FullPage состоит из секций – их количество может быть любым, в HTML коде это выглядит так (в примере страница состоит из 4 секций):

<div id="fullpage">
    <div class="section">Секция 1</div>
    <div class="section">Секция 2</div>
    <div class="section">Секция 3</div>
    <div class="section">Секция 4</div>
</div>

В свою очередь некоторые секции могут включать в себя слайдер:

<div class="section">
    <div class="slide"> Слайд 1 </div>
    <div class="slide"> Слайд 2 </div>
    <div class="slide"> Слайд 3 </div>
    <div class="slide"> Слайд 4 </div>
</div>

Для примера давайте создадим Страницу FullPage с 4 Секторами, а во 2-ом Секторе разместим Слайдер.

Для создания Страниц нам понадобиться пункт FullPage.

Для создания Секторов нам понадобиться пункт FullPage Sections.

Для создания Слайдеров нам понадобиться пункт FullPage Slides.

Можно создавать их в любом порядке.

1. Начнем с создания Страницы:

Вводим заголовок Страницы и спускаемся к окошку WP Fullpage Options:

Он состоит из двух пунктов: Fullpage Options и Sections Options.

Привязка Секторов осуществляется на вкладке Sections Options, поэтому переходим к ней:

Здесь стоит обратить внимание, что можно выбрать Тип Сектора:
Sections, Post Taxonomies, Post Types.
Оставляем Sections (Сектора) и здесь с помощью кнопки “Add sections” – можно добавить к странице Сектора.

2. Создание Секторов.

Пока сектора у нас отсутствуют, поэтому приступим к их созданию, а для этого переходим к пункту FullPage Sections:

Создание Секторов аналогично обычному созданию записей и страниц в wordpress, поэтому создаем 4 сектора:

В итоге у нас получилось 4 Сектора:

Теперь давайте привяжем наши Сектора к созданной нами в пункте 1 Странице – для этого опять входим в пункт FullPage, далее спускаемся вниз к окошку WP Fullpage Options, заходим во вкладку Sections Options и жмем кнопку “Add sections” и добавляем все 4 созданных сектора:

В итоге к нашей Странице добавилось 4 сектора:

Теперь уже можно посмотреть как выглядит наша Страница, для этого обновляем страницу и жмем кнопку “Просмотреть изменений”:

Страница будет выглядеть так:

Теперь давайте добавим к Сектору 2 – Слайдер.

Процесс добавление Слайдера к Сектору аналогичен добавлению Сектора к Странице.

Перейдем к Сектору 2 – в админке выберем пункт FullPage Sections, выбираем Сектор 2, далее спускаемся вниз к окошку WP Fullpage Options, заходим во вкладку Sliders Options: