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:

/***********************************************************************
Подключение кастомного скрипта 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 :

/* Подключаем слайдер для прокрутки блоков только на экранах более 1300px */
jQuery( document ).ready(function( $ ) { 

$(document).ready(function() {
if ( $(window).width() >= 1300) { 

	// $('#fullpage').fullpage({
	$('.bimit-content.dropcaps-content').fullpage({
		//Navigation
		menu: '#menu',
		lockAnchors: false,
		// anchors:['firstPage', 'secondPage'],
		anchors: ['firstSection', 'secondSection', 'thirdSection', 'fourthSection', 'fifthSection','other6Section','other7Section','other8Section','other9Section','other10Section'],
		navigation: false,
		navigationPosition: 'right',
		navigationTooltips: ['firstSlide', 'secondSlide'],
		showActiveTooltip: false,
		slidesNavigation: false,
		slidesNavPosition: 'bottom',

		//Scrolling
		css3: true,
		scrollingSpeed: 700,
		autoScrolling: true,
		fitToSection: true,
		fitToSectionDelay: 1000,
		//scrollBar: false,
		scrollBar: true,
		easing: 'easeInOutCubic',
		easingcss3: 'ease',
		loopBottom: false,
		loopTop: false,
		loopHorizontal: true,
		continuousVertical: false,
		continuousHorizontal: false,
		scrollHorizontally: false,
		interlockedSlides: false,
		dragAndMove: false,
		offsetSections: false,
		resetSliders: false,
		fadingEffect: false,
		normalScrollElements: '#element1, .element2',
		scrollOverflow: false,
		scrollOverflowReset: false,
		scrollOverflowOptions: null,
		touchSensitivity: 15,
		normalScrollElementTouchThreshold: 5,
		bigSectionsDestination: null,

		//Accessibility
		keyboardScrolling: true,
		animateAnchor: true,
		recordHistory: true,

		//Design
		controlArrows: true,
		verticalCentered: true,
		sectionsColor : ['#ccc', '#fff'],
		paddingTop: '3em',
		paddingBottom: '10px',
		fixedElements: '#header, .footer',
		responsiveWidth: 0,
		responsiveHeight: 0,
		responsiveSlides: false,
		parallax: false,
		parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'},

		//Custom selectors
		sectionSelector: 'section',
		slideSelector: '.slide',
		lazyLoading: true,

		//events
		onLeave: function(index, nextIndex, direction){},
		afterLoad: function(anchorLink, index){},
		afterRender: function(){},
		afterResize: function(){},
		afterResponsive: function(isResponsive){},
		afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
		onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
	});
};
});
});

Если Вам желательно чтобы 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 по каким-то причинам не отобразилась:

jQuery( document ).ready(function( $ ) { 
    $(window).scroll(function(){
        if ($(window).scrollTop() > 1) {
            //1
            if ($('.fullPage-1').hasClass('active')){
            $('#fp-nav > ul > li:nth-child(1) > a').addClass('active');
            $('#fp-nav ul li a span').css({'background':'white'});
            } else {
            $('#fp-nav > ul > li:nth-child(1) > a').removeClass('active');
            $('#fp-nav ul li a span').css({'background':'#4b944e'});
            };
            //2
             if ($('.fullPage-2').hasClass('active'))	{
            $('#fp-nav > ul > li:nth-child(2) > a').addClass('active');
            $('#fp-nav ul li a span').css({'background':'white'});
            } else {
            $('#fp-nav > ul > li:nth-child(2) > a').removeClass('active');
            $('#fp-nav ul li a span').css({'background':'#4b944e'});
            }
            //3
             if ($('.fullPage-3').hasClass('active'))	{
            $('#fp-nav > ul > li:nth-child(3) > a').addClass('active');
            } else {
            $('#fp-nav > ul > li:nth-child(3) > a').removeClass('active');
            }
            //4
             if ($('.fullPage-4').hasClass('active'))	{
            $('#fp-nav > ul > li:nth-child(4) > a').addClass('active');
            } else {
            $('#fp-nav > ul > li:nth-child(4) > a').removeClass('active');
            }
            //5
             if ($('.fullPage-5').hasClass('active'))	{
            $('#fp-nav > ul > li:nth-child(5) > a').addClass('active');
            } else {
            $('#fp-nav > ul > li:nth-child(5) > a').removeClass('active');
            }
            //6
             if ($('.fullPage-6').hasClass('active'))	{
            $('#fp-nav > ul > li:nth-child(6) > a').addClass('active');
            } else {
            $('#fp-nav > ul > li:nth-child(6) > a').removeClass('active');
            }
            //7
             if ($('.fullPage-7').hasClass('active'))	{
            $('#fp-nav > ul > li:nth-child(7) > a').addClass('active');
            } else {
            $('#fp-nav > ul > li:nth-child(7) > a').removeClass('active');
            }
            //8
             if ($('.fullPage-8').hasClass('active'))	{
            $('#fp-nav > ul > li:nth-child(8) > a').addClass('active');
            } else {
            $('#fp-nav > ul > li:nth-child(8) > a').removeClass('active');
            }
            //9
             if ($('.fullPage-9').hasClass('active'))	{
            $('#fp-nav > ul > li:nth-child(9) > a').addClass('active');
            } else {
            $('#fp-nav > ul > li:nth-child(9) > a').removeClass('active');
            }
            //10
             if ($('.fullPage-10').hasClass('active'))	{
            $('#fp-nav > ul > li:nth-child(10) > a').addClass('active');
            } else {
            $('#fp-nav > ul > li:nth-child(10) > a').removeClass('active');
            }
            };
    });
});

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

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

<!--fullPage VerticalNavPanel-->
<div class="right" id="fp-nav" "="">
<ul>
<li>
			<a href="#firstSection" class="active"><span></span></a>
		</li>
<li>
			<a href="#secondSection" class=""><span></span></a>
		</li>
<li>
			<a href="#thirdSection" class=""><span></span></a>
		</li>
<li>
			<a href="#fourthSection" class=""><span></span></a>
		</li>
<li>
			<a href="#fifthSection" class=""><span></span></a>
		</li>
<li>
			<a href="#other6Section" class=""><span></span></a>
		</li>
<li>
			<a href="#other7Section" class=""><span></span></a>
		</li>
<li>
			<a href="#other8Section" class=""><span></span></a>
		</li>
<li>
			<a href="#other9Section" class=""><span></span></a>
		</li>
<li>
			<a href="#other10Section" class=""><span></span></a>
		</li>
</ul>
</div>

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

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

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

afterRender: function(){},

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

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

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

<style>
.video-background{
height: 100vh;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
margin-top: -282px;
}
</style>
<div class="video-background">
   <div class="video-foreground">
     <div class="section active" id="section0">
		<video id="video" autoplay loop muted>
				<source src="http://видео расположенное локально на сервере" type="video/mp4" />
		</video>
    </div>
  </div>
</div>

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

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

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

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

<div class="kc-elm kc_shortcode kc_single_image no_mobile"> 
   <img src="https://wohnen-und-pflege.de/wp-content/uploads/2018/07/pause.png" class="Button_player video_no_pause lazyloaded"
    alt="">
  </div>

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

Теперь изменим настройки плагина в скрипте:
      afterLoad: function (anchorLink, index) {
          if (index == 1 &&  $('img.Button_player').hasClass('video_no_pause')) {
              $('video').get(0).play();
          }
      },

То есть исходя из скрипта выше, воспроизведение видео будет работать по логике наличия класса «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 это дело применяется так:

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 :

/* Деактивируем стили от классов добавленных плагином 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

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