Движение картинки при скролле

Есть 2 картинки (одна под другой), которые при скролле должны частично наезжать друг на друга.

Мне кажется, что формула не оптимальна, по этой формуле тяжело спозиционировать начальное положение объектов, т.к при смене значения атрибута data-speed изменяется начальное положение

HTML разметка

<section class="vis">
    <div class="container__fluid">
        <div class="vis__inner">
            <h2 class="vis__title">Title</h2>
            <img class="vis__img1 parallax__layer" data-speed="8" src="assets/img/vis/img1.jpg" alt="">
            <img class="vis__img2 parallax__layer"
            data-speed="14" src="assets/img/vis/img2.jpg" alt="">
        </div>
    </div>
</section>

JS

$(function() {
    window.addEventListener("scroll", function(event){

        var top = this.pageYOffset;

        var layers = $(".parallax__layer");
        var layer, speed, yPos;
        layers.each(function() {
            speed = $(this).attr('data-speed');
            console.log(speed);
            var yPos = -(top * speed / 100);
            $(this).attr('style','transform: translate3d(0px, ' + yPos + 'px, 0px)');
        });
    });
});

CSS

.vis__inner {
    position: relative;
    display: flex;
    flex-direction: column;
}

.vis__img1 {
    display: block;

    width: 700px;
    height: 525px;
    object-fit: cover;
}

.vis__img2 {
    display: block;

    width: 535px;
    height: 400px;
    object-fit: cover;

    position: absolute;
    bottom: -490px;
    left: 164px;
}