Philip is freelancer
If you feel the content is useful. Thank for me with a coffee 😊
In this tutorial, we're going to make a page that snaps from one fullscreen section to another as the user scrolls. This effect was popularized by the fullpage.js library (you now need to pay for it). It works fine for Brizy Cloud
How to Make Snapping Scroll Sections with javascript for brizycloud?
3 steps to do it:
1. Add the code js to page you want apply "scroll fullPage"
<script>
if (history.scrollRestoration) {
history.scrollRestoration = 'manual';
} else {
window.onbeforeunload = function() {
window.scrollTo(0, 0);
};
}
const time_out = 600;
const sectionsQty = document.querySelectorAll('section:not(.brz-section__header)').length;
let startFlag = true;
let classOpacity = document.querySelectorAll('.replay-animate');
let qty = 1,
prev = null,
main = null,
next = null;
function scrollDown100() {
window.scrollBy({
top: window.innerHeight,
behavior: "smooth"
});
}
function scrollUp100() {
window.scrollBy({
top: -window.innerHeight,
behavior: "smooth"
});
}
function replayAnimate() {
let replayAnimate = document.querySelectorAll('.wtr-active .replay-animate');
replayAnimate.forEach(replay => {
replay.classList.add("brz-animate");
});
}
function removeActive() {
main = document.querySelector(`section.wtr-s${qty}`);
main.classList.remove("wtr-active");
}
for (let i = 0; i < sectionsQty; i++) {
document.querySelectorAll('section:not(.brz-section__header)')[i].classList.add("wtr-s" + (i + 1));
}
classOpacity.forEach(addClass => {
addClass.addEventListener("animationend", (function() {
addClass.classList.add("brz-animate-opacity");
}));
});
document.addEventListener('wheel', function(event) {
event.preventDefault();
if (startFlag) {
const scrollDown = event.deltaY > 0;
const scrollLimit = qty >= 1 && qty <= sectionsQty;
if (scrollLimit) {
if (scrollDown && qty < sectionsQty) {
scrollDown100();
removeActive();
next = document.querySelector(`section.wtr-s${qty + 1}`);
next.classList.add("wtr-active");
qty++;
replayAnimate();
} else if (!scrollDown && qty > 1) {
scrollUp100();
removeActive();
prev = document.querySelector(`section.wtr-s${qty - 1}`);
prev.classList.add("wtr-active");
qty--;
replayAnimate();
}
}
setTimeout(() => {
startFlag = true;
}, time_out);
startFlag = false;
}
}, {
passive: false
});
document.addEventListener('keydown', function(event) {
event.preventDefault();
if (startFlag) {
if (event.keyCode == '40' && qty < sectionsQty) {
scrollDown100();
removeActive();
next = document.querySelector(`section.wtr-s${qty + 1}`);
next.classList.add("wtr-active");
qty++;
replayAnimate();
} else if (event.keyCode == '38' && qty > 1) {
scrollUp100();
removeActive();
prev = document.querySelector(`section.wtr-s${qty - 1}`);
prev.classList.add("wtr-active");
qty--;
replayAnimate();
}
}
setTimeout(() => {
startFlag = true;
}, time_out);
startFlag = false;
});
</script>
2. Set all blocks (sections) to "full Height"
3. Add this CSS to the page to hide the scroll bar
html {
scrollbar-width: none;
}
body::-webkit-scrollbar {
display: none;
}
4. Options:
If you want to Repeat the effect animations, just add the class name "replay-animate" to the element you need (Advanced >> CSS Class)
DONE!!!!
Note:
Only work for desktop
If you feel the content is useful. Thank for me with a coffee 😊
