jQuery: effetto di scrolling a parallasse a tutta pagina

Con jQuery possiamo creare un effetto di scrolling a parallasse a tutta pagina.

Partiamo da questa marcatura:

<div id="content" data-bg="parallax.jpg"></div>

Usiamo questi stili CSS:

#parallax {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    transition: top 300ms linear;
}

Infine usiamo jQuery:

$(function() {
    $( "#content" ).before( '<div id="parallax" style="background-image: url(' + $( "#content" ).data( "bg" ) + ');"></div>' );
    $( window ).on( "scroll", function() {
        var scrolled = $( this ).scrollTop();
        $( "#parallax" ).css( "top", - ( scrolled * 0.15 ) + "px" ) );
    });
});