javascript - 使用 JS 平移和调整元素以实现视差滚动在底部创建额外空间

Question

也许这是错误的方法，但我还没有在网上找到任何关于正确方法的有用信息。

我正在尝试使用火箭图像（附加）在页面标题上创建视差滚动效果（附加 gif）

这产生的问题是双重的：

1. 页面的主要内容滚动速度比正常速度快（不是最佳但可以调整）

2. 页脚下方产生了额外的空间，我不知道如何删除

CSS有点乱，我会解决它，对此感到抱歉。

function matrixArrayToCssMatrix(array) {
    return 'matrix(' + array.join(',') + ')';
}

//-2370
//-150

let rocketTranslation = [
    1, 0, 0, 1, 0, 100
];

document.getElementById("rocket_img").style.transform = matrixArrayToCssMatrix(rocketTranslation);
document.getElementById("top").style.height = (2100 - 3 * document.body.scrollTop) + "px";

document.body.onscroll = () => {
    rocketTranslation[5] = 100 - 3 * (document.body.scrollTop);
    document.getElementById("top").style.height = (2100 - 3 * document.body.scrollTop) + "px";
    document.getElementById("rocket_img").style.transform = matrixArrayToCssMatrix(rocketTranslation);
}

.body_fill {
    margin: 0;
    background-color: #ffffff; 
}

#top {
    width: 100%;
    text-align: center;
    background-color: #440884;
}

#top_big {
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
    color: #FFFFFF;
    font-size: 150;
}

#rocket_img {
    width: 100%;
}

html {
  scroll-behavior: smooth;
}

#pre {
    width: 100%;
    background-color: #193750;
}

#main {
    width: 100%;
    text-align: justify;
    background-color: #ffffff; 
    margin: 0;

    padding-top: 10vh;
}

#main_text {
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    color: #440884;
    font-size: 30;

    margin: 0;

    padding: 20%;
}

.text_right {
    text-align: right;
}

.nav {
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    color: #440884;
    font-size: 20;

    margin-top: 15vh;
    padding-top: 3vh;

    height: 5vh;
    background-color: #ffffff;
}

#footer {
    background-color: #440884;
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    color: #FFFFFF;
    font-size: 15;

    text-align: center;
}

.nav_link {
    padding-right: 5vw;
}

@media (min-height: 30vh) {
  .nav{
    position: sticky;
    top: 0;
  }
}

.hvr_ul {
    display: inline-block;
}

.hvr_ul:after {
    display: block;
    content: '';
    border-bottom: solid 3px #a50000;  
    transform: scaleX(0);  
    transition: transform 250ms ease-in-out;
    transform-origin:  0% 50%;
}

.hvr_ul:hover:after {
    transform: scaleX(1);
}

<div id="top">
  <p id="top_big"><br><br>PROJECT ICARUS</p>
  <img id="rocket_img" src="https://i.stack.imgur.com/m0K7m.jpg" />
</div>

<div class="nav text_right">
  <a class="nav_link hvr_ul">Projects</a>
  <a class="nav_link hvr_ul">Sponsors</a>
  <a class="nav_link hvr_ul">About Us</a>
  <a class="nav_link hvr_ul">Contact</a>
</div>

<div id="main">
  <p id="main_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet mauris at mauris finibus luctus. Sed a tempor nisi, sed cursus nisi. Duis vel sapien ullamcorper, interdum diam ac, sodales lorem. Quisque eu congue nulla. Sed tempor sapien dui,
    vehicula faucibus diam tristique venenatis. Donec a faucibus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce condimentum ligula consectetur mauris gravida aliquet. Curabitur viverra auctor nisl
    eu egestas.</p>
</div>

<div id="footer">
  Project Icarus 2020
</div>

动画
火箭.png

标签： javascripthtmlcssparallax