TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

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

2 193

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:

/*********************************************************************** Подключение кастомного скрипта jquery.fullPage.js в FOOTER только для главной страницы сайта. http://mblogm.ru/blog/kak-podklyuchaet-javascript-kod-master-wordpress/ ************************************************************************/ // if(!is_admin()) { if ($_SERVER[REQUEST_URI]=='/'){ function register_fullPage() { wp_enqueue_script( 'fullPage', get_bloginfo( 'template_directory' ).'/JS_CSS_Plugins/fullPage/jquery.fullPage.js', array( 'jquery' ), '1.11.1', $in_footer = true); }; add_action('init', 'register_fullPage'); }

CSS:

/*********************************************************************** Подключение кастомные стили jquery.fullPage.css в FOOTER только для главной страницы сайта. ************************************************************************/ if ($_SERVER[REQUEST_URI]=='/'){ wp_enqueue_style( 'bimit-fullPage', get_template_directory_uri() . '/JS_CSS_Plugins/fullPage/jquery.fullPage.css' ); }

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

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

scrollBar: true,

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

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

//Custom selectors sectionSelector: 'section',

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

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

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

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

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

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

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

afterRender: function(){},

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

afterLoad: function (anchorLink, index) { if (index == 1) { $('video').get(0).play(); } },

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

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

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

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

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

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

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

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

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

// ------------------------------------------------------------ // ------------------------------------------------------------ // FullPage Play Pause Button START // ------------------------------------------------------------ // ------------------------------------------------------------ //Селектор кнопки переключателя для плеера jQuery(document).ready(function($){ $('img.Button_player').toggle( // Первый клик (Плей) function(e){ // Сменить изображение кнопки на "Плей" $(this).attr('src','/wp-content/uploads/2018/07/play.png'); // Удалить класс "video_no_pause" для отмены автоматического вопроизведения видео при скроле страницы $(this).removeClass('video_no_pause'); // Остановить воспроизведение видео $('video').get(0).pause(); }, // Второй клик (Пауза) function(e){ // Сменить изображение кнопки на "Паузу" $(this).attr('src','/wp-content/uploads/2018/07/pause.png'); // Вернуть (добавить) класс "video_no_pause" для ВОЗОБНОВЛЕНИЯ автоматического вопроизведения видео при скроле страницы $(this).addClass('video_no_pause'); // Возобновить воспроизведение видео $('video').get(0).play(); }); }); // ------------------------------------------------------------ // ------------------------------------------------------------ // FullPage Play Pause Button END // ------------------------------------------------------------ // ------------------------------------------------------------

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

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

scrollOverflow: true,

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

fp-normal-scroll fp-auto-height

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

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

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

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

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

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

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

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

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

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

/* Деактивируем стили от классов добавленных плагином FullPAge START*/ .bimit-content.dropcaps-content.fullpage-wrapper section:nth-child(n+3):nth-child(-n+8) { left: inherit !Important; padding-left: inherit !Important; width: inherit !Important; height: inherit !Important; padding-top: inherit !Important; padding-bottom: inherit !Important; background-color: inherit !Important; } } /* END Деактивируем стили от классов добавленных плагином FullPAge */

Темы для 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

Источник записи: https://mediadoma.com

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее