Question

我遵循了Keith Clark https://keithclark.co.uk/articles/pure-css-parallax-websites/这个非常棒的教程。但是，我尝试构建的网站在页面底部有一个不需要的空间。为了使问题更加清晰，我将框中的绿色设置为主要内容。我希望当用户到达绿色框的底部时滚动停止，但我得到的是一个不需要的棕色空间。

查看我的代码：https://jsfiddle.net/72e5aho6/3/

HTML

<div class="parallax">
    <img class="parallax-layer layer-7" src="{% static 'holiday/landscape_7.svg' %}" alt="landscape art">
    <img class="parallax-layer layer-6" src="{% static 'holiday/landscape_6.svg' %}" alt="landscape art">
    <img class="parallax-layer layer-5" src="{% static 'holiday/landscape_5.svg' %}" alt="landscape art">
    <img class="parallax-layer layer-4" src="{% static 'holiday/landscape_4.svg' %}" alt="landscape art">
    <img class="parallax-layer layer-3" src="{% static 'holiday/landscape_3.svg' %}" alt="landscape art">
    <img class="parallax-layer layer-2" src="{% static 'holiday/landscape_2.svg' %}" alt="landscape art">
    <div class="parallax-layer layer-1">
        <img class="parallax-base-image" src="{% static 'holiday/landscape_1.svg' %}" alt="landscape art">
        <div class="main-content"></div>
    </div>
</div>

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

.parallax-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    font-size: 0;
}

.parallax-base-image {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.layer-7 {transform: translateZ(-7px) scale(8)}
.layer-6 {transform: translateZ(-6px) scale(7)}
.layer-5 {transform: translateZ(-5px) scale(6)}
.layer-4 {transform: translateZ(-4px) scale(5)}
.layer-3 {transform: translateZ(-3px) scale(4)}
.layer-2 {transform: translateZ(-2px) scale(3)}
.layer-1 {transform: translateZ(-1px) scale(2)}

.main-content {
    height: 1000px;
    background-color: green;
}

感谢所有回复。

纯CSS视差不需要的底部空间

0 个答案: