Обтравочный контур перехода между разделами с fullPage.js - PullRequest
Новая
       44

Обтравочный контур перехода между разделами с fullPage.js

0 голосов
/ 13 октября 2019

Я хотел бы иметь анимацию отсечения с обтравочным контуром SVG, которая будет скрывать первый раздел и отображать второй при анимации с использованием fullPage.js.

Так что это похоже на вопрос: полная страница JS-анимации в разделе

все же я хотел бы контролировать анимацию с определенной продолжительностью (чтобы переход был плавным).

Что я знаю или пробовал сейчас:

  1. FullPage.js onLeave и afterLoad Обратные вызовы должны быть использованы. Если я предотвращаю прокрутку в событии onLeave, я могу вызывать silentMoveTo только в событии afterLoad, но мне нужно то, что находится в следующих двух пунктах.
  2. Два раздела не могут быть активными (класс CSS) с fullPage.js (поэтому, например, я бы изменил непрозрачность раздела 2 с 0 на 1, как показывает анимация, а раздел 1 -быть скрытым наоборот, и путь отсечения фона переместится наверх, чтобы скрыть изображение раздела 1 (SVG).
  3. Я пытался анимировать путь отсечения (есть аналогичный рабочий пример), но, конечно, содержимоесекция 2 ниже не отображается. Вызов silentMoveTo для показа секции 2 после того, как анимация не используется, поэтому она должна быть синхронизирована с, скажем, 50% продолжительности анимации.

Каков наилучший подход? Я должен использовать fullPage.js (по запросу, используется встроенная тема WordPress). В идеале я планирую использовать временную шкалу в библиотеке javascript GreenSock с обратным вызовом в конце анимации, чтобы правильно сигнализировать основной файл fullPage.js. объект, активный раздел должен теперь быть # 2.

ADDED: вы можете увидеть один подход использования переходов с зеленымНосок здесь:

https://youtu.be/gE-Yuu2eEio?t=1694

но это анимация ПОСЛЕ загрузки второго раздела. Мне нужна анимация содержимого первого раздела, которая одновременно раскрывает второй раздел (мне известно о расширении Fading Effect fullPage.js, а не об этом решении).

1 Ответ

0 голосов
/ 17 октября 2019

Так что, я думаю, мне придется ответить на этот вопрос самому.

Краткий ответ: невозможно отобразить два раздела одновременно, используя fullPage.js, как было задумано.

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

        var fullPageOBj = new $('#fullpage').fullpage({
            ...
            onLeave: function (origin, destination, direction) {
            		dir = direction;
                    ...
            		if(origin == 1 && destination == 2){
                    $.fn.fullpage.setAutoScrolling(false);
                    document.body.style.overflow = "hidden";
                    ...
                    TweenMax.to(bSvg, 2.7, { }, "section1");
                    ...
                }
                $.fn.fullpage && $.fn.fullpage.setLockAnchors && $.fn.fullpage.setLockAnchors('false');
            },
            afterLoad: function (origin, destination) {
                console.log("aL - origin: " + origin + ", destination: " + destination + ", direction: " + dir);
              	if(destination == 1){
                    $("vc-section1").addClass("active");
                    ...
                }
                if(destination == 2){
              	  	TweenMax.to(bSvg, 0, { display: "block", onComplete: Delay2, delay: 3.2});            		
                	function Delay2() {
  	                	$.fn.fullpage.setAutoScrolling(true);
	                	$.fn.fullpage.silentMoveTo(2);
                    }
                }
            }
        }

Идея выше заключается в том, что событие afterLoad в fullPage.js порождается практически сразу после события onLeave, поэтому вы должны убедиться, что анимация в функции события onLeave завершена до того, как функция события завершится до того, какфункции afterLoad имеют место. Таким образом, приведенный выше код включает в себя создание функции Delay2, которая запускается после завершения анимации. Синхронизация в функции afterLoad установлена ​​с учетом времени для продолжительности анимации в функции onLeave.

Вам придется поиграть с таймингами. По умолчанию время перехода до разделов в fullPage.js составляет 700 мс.

Последняя идея, вероятно, заключалась бы в перемещении анимации в Раздел 2, но на странице уже нет объектов в Разделе 1 (для анимации при переходе кРаздел 2).

Вы можете добавить к обсуждению.

...