В настоящее время я работаю над проектом, где желаемый пользовательский интерфейс включает в себя очень индивидуальное взаимодействие со свитками.Пользовательский прокрутка UX
проблема: страница имеет секции X, каждый из них с высоты, равной видового экрана Hight height: 100vh;. Когда пользователь прокручивается в окне просмотра, текущий видимый раздел остается там, где он есть, и индикатор прокрутки анимируется на основе порога прокрутки по расстоянию (например, 30 пикселей). После того, как пользователь прокрутил порог, следующий раздел появляется внизу экрана и закрывает текущий раздел (который по-прежнему не перемещается).
Initial Approach: Установите каждую секцию на абсолютную позицию и регулировать их с помощью изменения классов CSS на основе scrollwheel события. Body overflow:hidden и transform свойство управлять разделами. Однако я столкнулся с проблемами.
- Событие scrollwheel, как представляется, документировано как очень неустойчивое решение для реализации.
- . Катушка WelelDelta события срабатывает асинхронно и с трудом фиксируется. (На хром он просто выплескивает кратное 3 раза, а не расстояние жест в px). Это затрудняет установление порога и оживление элементов, которые реагируют на этот порог.
В основном я хочу, чтобы иметь возможность отслеживать количество пикселей, покрывающих прокрутки, и применять это число к позиции определенного элемента подсказки прокрутки до тех пор, пока не будет достигнуто пороговое значение прокрутки. Как только он будет выполнен, функция запускает изменения классов и обновляет некоторую информацию на странице. Если пороговое значение не выполнено, элемент подсказки прокрутки возвращается к позиции по умолчанию.
Мой приложенный подход не очень способствует выполнению этого, поэтому я ищу либо 1) другой и более стабильный подход, либо 2) изменения/критические замечания по поводу того, что я делаю неправильно с этим подходом, чтобы сделать он стабилен.
(function scrollerTest($){
\t $('body').on ('mousewheel', function (e) {
\t var delta = e.originalEvent.wheelDelta,
currentScreenID = $('section.active').data('self').section_id,
currentScreen = $('section.part-' + currentScreenID),
nextScreenID = currentScreenID + 1,
nextScreen = $('section.part-' + nextScreenID);;
\t
\t if (delta < 0) { // User is Scrolling Down
currentScreen.removeClass('active').addClass('top');
nextScreen.removeClass('bottom').addClass('active')
\t } else if (delta > 0) { // User is Scrolling Up
\t
\t }
\t });
}(jQuery));body {
overflow: hidden;
padding: 0;
margin: 0;
}
section {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 999;
background-color: #CA5D44;
transition: 0.8s all ease-in-out;
}
section.part-1 {
position: relative;
z-index: 9;
}
section.part-2 {
background-color: #222629;
}
section.active {
transform: translateY(0);
}
section.top {
transform: translateY(-10%);
}
section.bottom {
transform: translateY(100%);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
<section class="part-1 home active" data-self='{ "section_id" : 1, "section_title" : "Home", "menu_main_clr" : "#fff" , "menu_second_clr" : "#CA5D44", "logo_clr" : "white" }'>
</section>
<section class="part-2 about bottom" data-self='{ "section_id" : 1, "section_title" : "About", "menu_main_clr" : "#CA5D44" , "menu_second_clr" : "#fff", "logo_clr" : "white" }'>
</section>
<section class="part-3 contact bottom" data-self='{ "section_id" : 1, "section_title" : "Contact", "menu_main_clr" : "#fff" , "menu_second_clr" : "#CA5D44", "logo_clr" : "white" }'>
</section>
</body>Edit Примечание: Сниппет, кажется, есть некоторые проблемы с обжигом события и изменения классов после первого экземпляра - не знаю, почему. На моем местном примере он запускает их всех сразу.
** Edite Note 2: ** Перечисленный код - это всего лишь копия самого близкого поведения, которого я мог бы достичь. К сожалению, вся эта функция порога кажется довольно недосягаемой, поскольку событие колеса не ведет себя как событие прокрутки.
Вы с учетом проверки [fullPage.js] (http://alvarotrigo.com/fullPage/)? Самая популярная библиотека для такого рода вещей. – Alvaro