视差超出预期

Question

我正在开发一个视差，当用户向下滚动时，它会水平滚动，但是它的移动速度超出了预期。你能帮我解决这个问题吗？

具有视差效果的图像超出预期。 我希望这不会发生。

JSFiddle

---

css

.content {
            width: 1170px;
            margin: 0 auto;
            height: 100em;
            margin-top: 5%;
        }

        .big-banner {
            float: right;
            position: relative;
        }


        .small-banners {
            display: flex;
            display: -webkit-flex;
            height: 572px;
            flex-direction: column;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .bg {
        background: url(https://dafitistatic-a.akamaihd.net/dynamic_yield/cms/static/kanui/images/11a324e8fc418__move-mage.jpg);
        position: absolute;
        z-index: 1;
        background-repeat: no-repeat;
        width: 575px;
        height: 765px;
        left: 0;
        top: -54px;
    }

---

HTML

<section class="content">
    <div class="big-banner">
        <div>
            <img src="https://fpoimg.com/575x660?text=Big&bg_color=f0efef&text_color=6b3d3d">
        </div>
        <div class="bg"></div>
    </div>

    <div class="small-banners">
        <div>
            <img src="https://fpoimg.com/277x277?text=Small&bg_color=403535&text_color=d7d1d1">
        </div>
        <div>
            <img src="https://fpoimg.com/277x277?text=Small&bg_color=403535&text_color=d7d1d1">
        </div>
        <div>
            <img src="https://fpoimg.com/277x277?text=Small&bg_color=403535&text_color=d7d1d1">
        </div>
        <div>
            <img src="https://fpoimg.com/277x277?text=Small&bg_color=403535&text_color=d7d1d1">
        </div>
    </div>
</section>