прокрутка страниц javascript

Прокрутка с эффектами анимации для отдельных страниц сайта (плагин 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:

настройка плагина 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. Начнем с создания Страницы:

создаем страницы с эффектом fullpage

скрипт fullpage

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

настройка wp fullpage

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

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

Создание секторов в fullpage

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

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

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

создаем Страницы, Сектора, Слайды в fullpage.js

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

Создаем сектора в wp fullpage

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

Сектора в fullpage

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

добавляем сектора к странице сайта

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

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

fullpage

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

секторальная разбивка страницы сайта

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

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

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

создаем слайдер в секторе

Здесь нам нужно поменять Slides Type на Slides и у нас появиться кнопка для добавления к Секторам Слайдеров — «Add slides»:

добавляем слайдеры к секторам

3. Создание Слайдеров.

Теперь переходим к пункту FullPage Slides, то есть приступаем к созданию Слайдеров.

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

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