Parallax

Possimus soluta mollis accumsan adipisci maecenas

Molestie rhoncus aliquet commodo mollit vel sodales blandit quidem? Quo distinctio habitasse delectus. Temporibus autem exercitationem. Repellat natoque sem elementum. Officiis id! Wisi quasi integer sociosqu, dolor assumenda tellus magna veniam, eveniet! Deserunt elementum, facilisis. Fames incidunt. Urna vel, penatibus dui mollis? Ante? Nostra tortor porttitor conubia luctus nibh, omnis consectetur mattis repellendus? Ac quibusdam, class per fermentum fugit cupiditate tempore nibh lectus! Ullamcorper, donec maiores ut, mattis accusamus fames.

Quis impedit assumenda! Mollit volutpat mollitia aliquid praesent, morbi incididunt scelerisque saepe soluta leo, autem explicabo leo praesent vivamus nostra condimentum cras repudiandae viverra hic potenti neque suscipit, eveniet commodi, iste iure mollitia rhoncus, voluptas.

Hac primis pellentesque senectus laboriosam convallis officia. Nullam totam quia adipiscing reprehenderit sodales congue gravida molestie, illo malesuada, pulvinar aliquid autem sapien dictum per, velit! Non, quibusdam excepturi dignissimos litora rerum vitae minus! Euismod neque.

Photo by Nicholas Swanson

<div class="parallax" 
    data-parallax-speed="0.5" 
        data-parallax-image="//picsum.photos/id/57/2400/1800"
            data-parallax-height="60vh">
    <h3>Photo by Nicholas Swanson</h3>
</div>
Deleniti magna quisquam! Modi feugiat consectetuer, numquam, minim, tincidunt vulputate posuere dis. Hendrerit similique eleifend fusce! Bibendum elit, vel feugiat? Habitant? Officia iste tenetur aute anim, iste? Sequi corporis alias, ullam fermentum. Fermentum molestias totam. Diam voluptates torquent ullam facilisi, euismod volutpat consectetuer massa ratione cras, exercitation nobis, sint rutrum aliquet itaque unde? Risus natus platea dignissim? Habitant, arcu quasi imperdiet nisl scelerisque torquent eligendi, fermentum ipsa eiusmod. Luctus in. Photo by Alexander Shustov
<div class="parallax" 
    data-parallax-speed="9" 
        data-parallax-image="//picsum.photos/id/76/2800/1600"
            data-parallax-height="60vh">
    <blockquote>...<cite>Photo by Alexander Shustov</cite></blockquote>
</div>

Photo by Gabe Rodriguez

<div class="parallax" 
    data-parallax-speed="1.5" 
        data-parallax-image="//picsum.photos/id/111/4400/2656"
            ="70vh">
    <h3 class="h">Photo by Gabe Rodriguez</h3>
</div>

É preciso acertar o tamanho da imagem e os atributos data-parallax-height e data-parallax-speed dependendo da posição do parallax e largura do dispositivo

.parallax {
    position: relative;
    width: 100%;
    background-attachment: fixed;
    background-size: cover;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.95), -1px -1px 1px rgba(0, 0, 0, 0.95);
    padding: 1rem;
    z-index: 897
}

let parallax = {
    effect: function() {
        let parallax = document.querySelectorAll(".parallax");
        parallax.forEach( element => {
            element.style.backgroundImage = "url('"+element.dataset.parallaxImage+"')";
            element.style.height = element.dataset.parallaxHeight;
            if(element.hasAttribute("data-parallax-speed")) {
                window.addEventListener('scroll', function() {
                    parallax.forEach( elemt => {
                        var scrollY = parseInt( scrollPosY(document.body || document.documentElement) );
                        if(scrollY > 0) {
                            elemt.style.backgroundPosition = "center -"+(parseInt(scrollY / elemt.dataset.parallaxSpeed))+"px";
                        } else {
                            elemt.style.backgroundPosition = "center "+scrollY+"px";
                        }
                    });
                });
            }
        });
        function scrollPosY(spy) {
            return spy.scrollTop || document.documentElement.scrollTop;
        };
    }
}.effect();