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

JavaScriptjQueryKing Composer

Последнее обновление Ноя 29, 2024

Содержание

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

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

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

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

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

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

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

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

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

JS:

CSS:

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

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

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

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

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

Темы для WordPress с FullPage:

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

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

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

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

Содержимое архива ложем в каталог темы на 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( $ ) {</p><p>$(document).ready(function() {
if ( $(window).width() >= 1300) {</p><p>// $('#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',</p><p>//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,</p><p>//Accessibility
        keyboardScrolling: true,
        animateAnchor: true,
        recordHistory: true,</p><p>//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'},</p><p>//Custom selectors
        sectionSelector: 'section',
        slideSelector: '.slide',
        lazyLoading: true,</p><p>//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>

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

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


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
// ------------------------------------------------------------
// ------------------------------------------------------------</p><p>//Селектор кнопки переключателя для плеера
jQuery(document).ready(function($){</p><p>$('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();
    });
});</p><p>// ------------------------------------------------------------
// ------------------------------------------------------------
//  FullPage Play Pause Button END
// ------------------------------------------------------------
// ------------------------------------------------------------

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

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


scrollOverflow: true,

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


fp-normal-scroll fp-auto-height

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

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

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

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

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

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 */