Articles on: Custom extensions

Parallax scrolling

You can see an example of a working parallax scrolling here


Step 1/6


Add the photos component to your page.


Step 2/6


Clear all fields inside.



Step 3/6


In the style tab, upload a background image and set the transparency to 0.



Step 4/6


In the code tab, set up the parallax-section class.



Step 5/6


Set the image height.




Step 6/6


Use this code to Global <body> HTML code



<style>
.parallax-section {
height: 400px;
position: relative;
overflow: hidden;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>

<script>
function parallaxEffect() {
const parallaxSections = document.querySelectorAll('.parallax-section');

parallaxSections.forEach(section => {
const speed = 0.5;
const rect = section.getBoundingClientRect();
const offset = rect.top;
section.style.backgroundPositionY = (offset * speed) + 'px';
});
}

window.addEventListener('scroll', parallaxEffect);

</script>

Updated on: 01/11/2024

Was this article helpful?

Share your feedback

Cancel

Thank you!