视差滚动 jquery

<div class="parallax">
    <div class="layer background"></div>
    <div class="layer foreground"></div>
    <div class="content">
        <h1>Welcome to Our Parallax World</h1>
    </div>
</div>

.parallax {
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    perspective: 1px;
}

.layer {
    position: absolute;
    width: 100%;
    height: 100%;
}

.background {
    background: url('background.jpg') no-repeat center center fixed;
    background-size: cover;
    transform: translateZ(-1px) scale(2);
}

.foreground {
    background: url('foreground.png') no-repeat center center fixed;
    background-size: cover;
    transform: translateZ(0);
}

.content {
    position: relative;
    z-index: 1;
    color: white;
    text-align: center;
    padding: 50px;
}

$(window).scroll(function() {
    var scrollTop = $(this).scrollTop();
    $('.background').css('top', -(scrollTop * 0.5));
    $('.foreground').css('top', -(scrollTop * 0.3));
});