Я использую плагин от blurfx: https://github.com/blurfx/onepagescroll для достижения эффекта прокрутки на одну страницу. Работает как драгоценный камень для создания горизонтальной секции прокрутки, см. «Рабочую» демонстрацию здесь: https://aidloc.githus.io/development.html
Проблема возникает, когда я пытаюсь анимировать из контейнера onepagescroll (запускается пурпурные стрелки):
Я использую простой бит 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 анимацию страницы.