Прокрутка ScrollingMagic.js это плагин jQuery, который помогает быстро реализовать доступный, удобный на ощупь эффект прокрутки одной страницы в одностраничных веб-приложениях, таких как целевая страница.
Пользователи могут перемещаться между блоками прокрутки с помощью колесика мыши, клавиш со стрелками и сенсорных жестов.
Как его использовать:
1. Добавьте блоки прокрутки (разделы содержимого) на страницу.
<sections class="scrolling-block">
Section 1
</sections>
<sections class="scrolling-block">
Section 2
</sections>
<sections class="scrolling-block">
Section 3
</sections>
...2. Скрыть полосу прокрутки браузера.
html {
width:100%;
scrollbar-width:none;
/* Also needed to disable scrollbar Firefox */
-ms-overflow-style:none;
/* Disable scrollbar IE 10+ */
}
@-moz-document url-prefix() {
/* Disable scrollbar Firefox */
html {
scrollbar-width:none;
}
}
html::-webkit-scrollbar {
/* Disable scrollbar Chrome/Safari/Webkit */
width:0px;
background:transparent;
}3. Пример стилей CSS для блоков прокрутки.
.scrolling-block {
display: flex;
justify-content:center;
align-items:center;
background-color: rgba(0,0,0,0.5);
width:100%;
min-height: fit-content;
height:100vh;
position:relative;
}
.scrolling-block img {
width:auto;
max-width:100%;
height:100%;
object-fit: cover;
}
.scrolling-block.invise {
opacity:0;
transition: opacity0.5s ease-in;
}
.scrolling-block.active {
opacity:1;
transition: opacity0.5s ease-in;
}4. Импортируйте как библиотеку jQuery, так и ScrollingMagic.js в документ. Вот и все.
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/scrollingMagic.js"></script>5. Переопределите задержки по умолчанию в миллисекундах.
let delayWheel = 400;
let delayTouch = 400;
let delayKey = 700;6. По умолчанию плагин автоматически отключает сенсорные жесты, если размер видового экрана меньше 320px. Вы можете переопределить точку останова непосредственно в JavaScript следующим образом:
window.addEventListener('scroll',
(e) => {
e.preventDefault()
if (counter !== sections.length - 1) {
if ((document.documentElement.clientWidth >= 320)) {
window.scrollTo(0,
sections[counter].offsetTop - (
document.documentElement.clientHeight - (sections[counter].clientHeight)) / 2
)
}
}
})
function InitTouchScroll() {
if (document.documentElement.clientWidth >= 320) {
window.addEventListener('touchmove', touchmove,
{passive:false})
window.addEventListener('touchstart', touchstart, {passive:false})
window.addEventListener(
"touchend",
touchend,
{passive:false}
);
}else {
window.removeEventListener('touchmove', touchmove,)
window.removeEventListener('touchstart', touchstart,)
window.removeEventListener('touchend', touchend,)
}
}Демо-версия
https://www.jqueryscript.net/demo/touch-fullpage-scrolling-magic/