FullPage.JS разделен на экраны.На мобильном устройстве сделай его одним стилем страницы - PullRequest
0 голосов
/ 14 апреля 2019

Я нашел отличный пример функции разделения экрана в библиотеке FullPage.js.Вот демоверсия .

Здесь я сделал демоверсию jsFiddle с одним исключением, это не полноэкранный режим.

#splitscreen > .section .column-left {
  float: left;
  width: 50%;
  color: #000;
  background: #fff;
}

#splitscreen > .section .column-right {
  float: right;
  width: 50%;
  color: #fff;
  background: #000;
}

#splitscreen > .section .column-left {
  transition: all 1s ease 0s;
  transform: translateY(100%);
  backface-visibility: hidden;
}

#splitscreen > .section .column-right {
  transition: all 1s ease 0s;
  transform: translateY(-100%);
  backface-visibility: hidden;
}

#splitscreen > .section.active {
  z-index: 1;
}

#splitscreen > .section.active .column-left {
  transform: translateY(0);
}

#splitscreen > .section.active .column-right {
  transform: translateY(0);
}

#splitscreen > .section.active ~ .section .column-left {
  transform: translateY(-100%);
}

#splitscreen > .section.active ~ .section .column-right {
  transform: translateY(100%);
}

/* prevent fullpage from translating the page */
#splitscreen {
  transform: translate3d(0px, 0px, 0px) !important;
}

#splitscreen > .section {
  position: absolute;
  top: 0;
  left: 0;
}

НоВопрос в том, как модифицировать исходный код, чтобы заставить FullPage.js работать в состоянии слайда по умолчанию?Другими словами, после того, как мобильное устройство обнаружено (медиа-запрос), заставьте FullPage.js использовать стиль одной страницы.

UPD : я добавил этот JS и CSS для уничтожения FullPageКонфигурация после обнаружения мобильного устройства.Но это работает исключительно на CSS.Как я могу восстановить его на мобильном телефоне с помощью одного стиля страницы?

JS

$(document).ready(function () {

    'use strict';

    var fullPageCreated = false;
    createFullpage();

    function createFullpage() {
        if (fullPageCreated === false) {
            fullPageCreated = true;
            $('#splitscreen').fullpage({
                scrollingSpeed: 1000,
                responsiveWidth: 740,
                verticalCentered: false,
                anchors: [''],
                navigation: true,
                navigationPosition: 'left',
                css3: true,
                scrollingSpeed: 800,
                autoScrolling: true,
                fitToSection: true,
                fitToSectionDelay: 1000,
                scrollBar: false,
                easing: 'easeInOutCubic',
                easingcss3: 'ease',

                keyboardScrolling: true,
                animateAnchor: true,
                recordHistory: true
            });
        }
    }

function createFullpageMob() 
   {         

        $('#splitscreen').fullpage({
            scrollingSpeed: 100000, /*for debug purpose*/
            responsiveWidth: 500,
            verticalCentered: false,
            anchors: [''],
            navigation: false,                
            css3: true,
            scrollingSpeed: 10800, /*for debug purpose*/
            autoScrolling: true,
            fitToSection: true,
            fitToSectionDelay: 1000,
            scrollBar: true,
            easing: 'easeInOutCubic',
            easingcss3: 'ease',

            keyboardScrolling: true,
            animateAnchor: true,
            recordHistory: true
        });

}  

    if (document.documentElement.clientWidth < 400) {
        $.fn.fullpage.destroy('all');
    }

    $(window).resize(function () {
        if ($(window).width() > 400) {
            createFullpage();
        } else {
            if (fullPageCreated == true) {
                fullPageCreated = false;
                $.fn.fullpage.destroy('all');
                createFullpageMob();/*seems that it's initizlized, but doesn't work*/
            }
        }

    });


});

CSS

@media only screen and (max-width : 420px) {

    #splitscreen > .section .column-left {

        width: 100%;
    }

    #splitscreen > .section .column-right {

        width: 100%;
    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...