javascript - 使用javascript的图像溢出效果

Question

我想知道是否有人可以帮助我解决这个问题:
Take a look at this Gif please
如您所见，图像在滚动时相互溢出!
那么我如何为我的图像使用这种效果？
有没有教程链接或插件？

到目前为止，这是我的代码(html 和 css):

.gallery-img-parent {
    max-height: 200px;
    padding-top: 32px;
    position: relative;
}

.gallery-img-double {
    width: 100%;
    max-height: 84px !important;
}

.gallery-double-child {
    position: relative;
}

.gallery-img-parent > a, .gallery-img-parent > .gallery-double {
    padding: 0 !important;
}

.gallery-img {
    width: 100%;
    height: 100%;
}

.gallery-img, .gallery-img-double {
    object-fit: cover;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="menu-parent container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="container gallery-container">
                <div class="row justify-content-center gallery-img-parent">
                    <a class="col-6" href="#" id="img1">
                        <img class="gallery-img" src="http://placehold.it/1/acd373">
                    </a>
                    <a class="col-3" href="#" id="img2">
                        <img class="gallery-img" src="http://placehold.it/1/2b3a5c">
                        
                    </a>
                    <a class="col-3" href="#" id="img3">
                        <img class="gallery-img" src="http://placehold.it/1/003a35">
                       
                    </a>
                </div>
                <div class="row justify-content-center gallery-img-parent">
                    <div class="col-3 gallery-double">
                        <a href="#" id="img4" class="gallery-double-child">
                            <img class="gallery-img-double" src="http://placehold.it/1/2b3a5c">
                            
                        </a>
                        <a href="#" id="img5" class="gallery-double-child">
                            <img class="gallery-img-double" src="http://placehold.it/1/1a202e">
                            
                        </a>
                    </div>
                    <a class="col-6" href="#" id="img6">
                        <img class="gallery-img" src="http://placehold.it/1/acd373">
                        
                    </a>
                    <a class="col-3" href="#" id="img7">
                        <img class="gallery-img" src="http://placehold.it/1/003a35">
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

感谢您的宝贵时间 ♥ 欢迎任何回复...

Answer 1

这是给你的一个想法: 您将有 4 个或更多主 div，它们具有不同的滚动速度，主 div 将相互叠加。照片将填充在每个 div 上。每行之间的垂直边距将取决于滚动速度。 现在在你的滚动条上，你将根据速度调整每个 div 的 margin-top/position。