null

fullPage.js – Работаем с веб плагином в WordPress

fullPage.js – Простая в использовании библиотека для создания полноэкранных прокручивающихся веб-сайтов (также называемых веб-сайтами одной страницы или сайтами одной страницы). Это позволяет создавать полноэкранные прокручивающиеся веб-сайты, а также добавлять некоторые ландшафтные слайдеры внутри разделов сайта.

Скажу честно продукт который сделали разработчики fullPage.js является невероятно красивым и очень дизайнерски привлекательным решением. В данной записи я соберу необходимые прежде всего самого себя заметки, касаемо данного веб плагина. Но начинающему web разработчику здесь (я думаю) будет тоже что почерпнуть полезное, особенно при разработке своих решений и использовании данного плагина на cms WordPress.

Полезные ссылки:

Страница разработчика плагина:

https://github.com/alvarotrigo/fullPage.js/tree/master/lang/russian

На всякий случай CDN от разработчиков:

https://cdnjs.com/libraries/fullPage.js

 Страница с примерами:

https://alvarotrigo.com/fullPage/

Полезная инструкция:

http://www.creative-seo.ru/blog/vertikalnyj-i-gorizontalnyj-skrolling-s-fullpage-js/

Легкий пример применения:

http://jsfiddle.net/b1k9wt39/4/

Обсуждение остановки видео в бекграунде:

https://github.com/alvarotrigo/fullPage.js/issues/35

Качаем архив из моего примера:

Содержимое архива ложем в каталог темы на FTP сервере.

https://mediadoma.com/_PRIMERU/fullPage.js.zip

Подключение fullPage в свою тему

Добавляем в function.php:

JS:

CSS:

Отдельно рассмотрим добавленный код в конце файла jquery.fullPage.js :

Если Вам желательно чтобы jQuery анимация страницы зависящая от scrollTop работала (анимация меню, и элементы анимируемые при прокрутке страницы), тогда обратите внимание на данный параметр:

Подробнее об этом сам разработчик пишет здесь:
https://github.com/alvarotrigo/fullPage.js/wiki/FAQ—Frequently-Answered-Questions#parallax-doesnt-work-with-fullpagejs

В данном коде мной указан не стандартный класс для блока контента, в этой строке

То есть Вы после прочтения doxs’a тоже сможете применить данный слайдер для своих нестандартных проектов.

Оформление вертикальной навигации fullPage:

Благодаря данному скрипту происходит анимация навигации по блокам страницы, в случае если штатная вертикальная навигация fullPage по каким-то причинам не отобразилась:

Опять же в случае если по каким-то причинам плагин fullPage не произвел отображение вертикальной навигационной панели в виде “кругов”.

Вам придет на помощь данная верстка ( код jquery выше, написанн специально под неё). Просто вставьте данный код в конец кода страницы (или в любое другое удобное для Вас место).

Воспроизведение видео при scrollOverflow: false

Как оказалось весьма большая морока это воспроизведение видео бекграунда после скролла ниже экрана.

Для того что бы видео не останавливалось а продолжало воспроизводится необходимо Место данного кода настроек:

прописать код ниже:

Для наглядности приведу верстку и стили:

Но лучше воспользуйтесь данным кодом:

Video Background – полностью адаптивный видео бекграунд (работающий из вложенного div)

Добавляем кнопку Play/Pause для видео бекграунда

Для начала добавим саму кнопку:

Для данной кнопки добавим в медиатеку два изображения:

Теперь изменим настройки плагина в скрипте:

То есть исходя из скрипта выше, воспроизведение видео будет работать по логике наличия класса “video_no_pause” у ранее добавленной кнопки кнопки.

Теперь добавим обработчик на jQuery:

 

Нормальная прокрутка блоков которые не вмещаются в один экран

Да ребетя, день над решщением данной задачи пролетел как одна минута… Решение которое предлагает разработчик, а именно активация пункта:

не помогла решить задачу по нормальнйо прокрутке длинного блока. Решением оказалось (на как решением, более менее нормальными костылями) применение данных классов к section:

В итоге получаем обычную прокрутка “над”, “в” и немного “под” секцией с данными классами, далее скрол элементов на странице происходит обычным для fullPage методом слайдов.

В King Composer’e это дело применяется так:

2018-02-21_19-36-56

Сделать так как у разрабов:

See the Pen WZmMgZ by Álvaro (@alvarotrigo) on CodePen.

К сожалению не удалось 🙁

Вот что пишут разрабы по данной теме:

https://github.com/alvarotrigo/fullPage.js#creating-smaller-or-bigger-sections

Примеры кода для применения в fullPage:

https://github.com/alvarotrigo/fullPage.js/tree/master/examples

Отменяем все стили которые применил fullPage при помощи css :

Темы для WordPress с FullPage:

https://github.com/charlesdeptula/starter-fullpagejs

https://github.com/pr-olga/wordpress-onepager

https://github.com/derkodde/derkodde_fullpagetheme

https://github.com/Motoki0616/MyPortfolio

https://github.com/marbaque/dandelion

Другие интересные темы:

https://github.com/search?p=1&q=FullPage+wordpress&type=Repositories&utf8=%E2%9C%93

fullPage.js – Работаем с веб плагином в WordPress
5 (100%)
Всего проголосовало: 1