Question

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

到目前为止，这是我的代码（html和css）：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

Answer 1

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

使用javascript的图像溢出效果

1 个答案: