Adding parallax effect on specific images and with full effect

Site URL: https://www.orcasoundproject.com/

Hello,

How can I add parallax scrolling on Squarespace 7.1 on specific images? I have tried different codes but none of them seem to be working or they have minimal impact, you can barely notice it. I would like to have the effect of totally scrolling through it like in this example on the header image: https://www.recyclerebuild.org/spotlight

Thanks!

.sqs-video-background {
position fixed;
top:0;

}

Hello,

Thanks for your help but the above seems not to be working, it says it has a syntax error for some reason.

The code injection I used for the parallax is the following:

<script src="https://cdn.jsdelivr.net/npm/simple-parallax-js@5.4.1/dist/simpleParallax.min.js"></script>

<script>
var images = document.querySelectorAll('.section-background img');
new simpleParallax(images, {
scale: 1.2,
delay: 1,
});
</script>
<style>
.simpleParallax {
   height: 100%;
}
</style>

Thanks

Did you add to Custom CSS? The code should be in Home > Settings > Advanced > Code Injection

Hi tuanphan, it is in code injection indeed. I just want the parallax to be more dramatic like in https://www.recyclerebuild.org/spotlight top banner. If you go to my website https://www.orcasoundproject.com/ you can barely feel the parallax and when the effect is increased in the code it just zooms in or has a weird delayed effect. 

I would like for the next section to go over completely of the image that is in the previous section 'behind'.

Thanks!