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?

Thank you!