Adding vertical parallax effect and overlay on banner image

parallaxImage Parallax scrolling is a web site trend where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling.

Dimmed overlay with CSS, which give image a blackish effect, so text on it can be visible.

css

.parallax-container {
    overflow: hidden;
    background-color: #070504;
}
img.accordion-banner-image {
    object-fit: cover;
    width: 100%;
    opacity: .5;
}

js

    $(document).scroll(function(){
        $('#image-has-parallax').css('transform','translateY('+String($(document).scrollTop()/2)+'px)')
    })

Happy Coding.

Archive