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

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

Я хотел бы иметь обтравочную анимацию с обтравочным контуром 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.

ДОБАВЛЕНО: вы можете увидеть один подход использования переходов с GreenSock здесь:

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

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

§

Я использую jquery fullpage и аниме js для моего нового проекта.

Я запускаю анимацию (появляется), когда вызывается callback afterLoad. Моя проблема в том, что иногда, когда пользователь прокручивает быстрее, чем продолжительность анимации, следующая анимация (скрытие), которая запускается onLeave, выглядит не так, как задумано. Я попытался использовать полный обратный вызов anime.js, но я не смог сделать то, что хотел. Воспроизведение в Интернете: https://jsfiddle.net/5mwbh9ok/6/

 .heading span { position: relative; display: inline-block; white-space: pre; opacity: 0; } 

Я нашел этот вопрос, который похож, но я не смог реализовать задержку слайдов для более чем 1 слайда: Fullpage.js. Добавление задержки прокрутки

Я хочу дождаться завершения анимации, прежде чем перейти к следующему разделу.

Буду очень признателен за любые советы о том, как решить эту проблему :)

§

Я создал сайт, используя fullpage.js. Теперь у меня проблемы с сенсорными устройствами: когда включена автопрокрутка, я часто не могу пролистать другой раздел. Это как будто ты уже внизу страницы. У меня есть эта проблема на всех сенсорных устройствах, которые я пробовал (Ipad и Iphone с Chrome и Safari, Android с Chrome). На настольном компьютере у меня нет этой проблемы.

Посетите www.airport-signage.com, чтобы увидеть проблему.

Мои настройки для fullpage.js:

 $(document).ready(function() { $('#fullpage').fullpage({ anchors: ['home', 'approach', 'work', 'services', 'company', 'team', 'contact'], menu: '#menu', 'autoScrolling': true, 'controlArrows': true, 'slidesNavigation': false, 'verticalCentered': false, 'touchSensitivity': 5, 'css3': true, 'fixedElements': '#fixedHeader', 'scrollOverflow': true, 'normalScrollElements': '#map_canvas', 'sectionsColor': ['#3df945', '#000', '#fff', '#3df945', '#000', '#fff', '#3df945'], 'onLeave': function(){ stuff }, }); }); 

В чем может быть проблема? Как я могу это исправить?

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector