Parallax Hero

HTML #

<div class="hero">
    <img src="" alt="">
</div>

CSS #

.hero {
    position: relative;
    height: 50vh;

    img {
        position: absolute;
        top: 0; // Mogelijk -getal wanneer vlak niet volledig uitgevuld
        left: 0;
        width: 100%;
        height: 100%; // Mogelijk + -getal bij top wanneer vlak niet volledig uitgevuld
        object-fit: cover;
        object-position: center;
    }
}

JS #

function headerParallax() {
    var content = jQuery('.hero > img');

    jQuery(window).scroll(function(){
        var scrollTop = jQuery(this).scrollTop();
        content.css( { transform: 'translateY(' + (scrollTop * 0.3) + 'px)' } );
    });
}