Parallax scrolling
You can see an example of a working parallax scrolling here
Add the photos component to your page.

Clear all fields inside.

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

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

Set the image height.


Use this code to Global <body> HTML code

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
Thank you!