Анимация разделов при использовании onepagescroll. js - PullRequest
0 голосов
/ 07 апреля 2020

Я использую плагин от blurfx: https://github.com/blurfx/onepagescroll для достижения эффекта прокрутки на одну страницу. Работает как драгоценный камень для создания горизонтальной секции прокрутки, см. «Рабочую» демонстрацию здесь: https://aidloc.githus.io/development.html

Проблема возникает, когда я пытаюсь анимировать из контейнера onepagescroll (запускается пурпурные стрелки):

enter image description here

Я использую простой бит jquery для анимации между основными разделами:

    $('html,body').animate({
        scrollTop: $(proj).offset().top
    },
    1750);

Это работает при перемещении из оранжевой секции в горизонтальную секцию прокрутки, но НЕ работает в одиночку при анимации из горизонтальной секции прокрутки в секцию под ней. Мне пришлось реализовать дополнительный код, чтобы этот раздел отображался:

$(".pinfo").click(function () { //.pinfo is the magenta arrow
 //this is required to enable the one-page scrolling script (onepagescroll.js)
    onepagescroll('div.A', {
        pageContainer: 'section',
        animationType: 'ease-in-out',
        animationTime: 1000,
        infinite: false,
        pagination: false,
        keyboard: false,
        direction: 'vertical'
    });

    $(".A").removeClass("hide"); // removes a class used to hide the section we're animating twoards
    $(".pages").removeClass("ops-container"); // removes the class applied by onepagescroll.js

$('html,body').animate({
        scrollTop: $(proj).offset().bottom
    },
    1750);
});

Как вы можете видеть на изображении, я могу добраться до раздела ниже горизонтальной секции прокрутки, но он внезапно скачет там вместо Я понимаю, что в том, что я спрашиваю, задействовано много переменных (и слишком много зависимостей для настройки кода), но любая информация приветствуется!

Tl; dr onepagescroll. js захватывает мою разметку и заставляет меня прыгать через обручи, чтобы выполнять базовую c анимацию страницы.

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