我想实现这样的东西：http://levenopmars.natgeotv.com/nl/
如您所见，当您向下滚动时，星星背景轻微会移动，而行星会变小并向上移动。
为了这个问题的缘故，我将使用与上面网站上相同的背景和行星图像，但当然我不会在我的项目中使用这些图像。
我一直在谷歌上搜索了几天，学习如何做很酷的视差效果，但资源稀缺，每个人都指出 ScrollMagic JS 是要走的路，但他们的文档充其量是最少的，解释不多，教程也缺乏。
我不介意只用jQuery来做这件事，但为了保持一致性，我更愿意学习如何用ScrollMagic做到这一点。
我已经用一个简单的引导容器和星星背景设置了一个jsfiddle，但我无法将行星的图像放置在需要位于容器顶部中心的位置。而且我不知道从哪里开始做视差效果。
星星背景：https://i.stack.imgur.com/QvxCo.jpg
行星图像：https://i.stack.imgur.com/x5cOQ.png
演示https://jsfiddle.net/73p0336p/18/
.HTML
<section id="third-section">
<div class="container">
<div class="row">
<div class="col-md-6">
<h1 class="text-left">The Launch</h1>
<p class="text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla diam quis turpis eleifend, ac molestie diam consectetur. In at augue tellus. Pellentesque efficitur efficitur nisl, suscipit blandit mauris. Quisque consectetur tincidunt suscipit. Nullam fermentum dictum quam vel volutpat. Phasellus eleifend molestie neque id varius. Aenean convallis ornare nisi vitae blandit. Phasellus imperdiet, diam vel congue blandit, quam felis vehicula tellus, eget lacinia dui quam vel metus. Proin eleifend volutpat magna et convallis. Nam pharetra, orci eu aliquet efficitur, turpis leo consequat purus, sed fringilla metus arcu ac elit.</p>
<p class="text-left">ALorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla diam quis turpis eleifend, ac molestie diam consectetur. In at augue tellus. Pellentesque efficitur efficitur nisl, suscipit blandit mauris. Quisque consectetur tincidunt suscipit. Nullam fermentum dictum quam vel volutpat. Phasellus eleifend molestie neque id varius. Aenean convallis ornare nisi vitae blandit. Phasellus imperdiet, diam vel congue blandit, quam felis vehicula tellus, eget lacinia dui quam vel metus. Proin eleifend volutpat magna et convallis. Nam pharetra, orci eu aliquet efficitur, turpis leo consequat purus, sed fringilla metus arcu ac elit.</p>
<p class="text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla diam quis turpis eleifend, ac molestie diam consectetur. In at augue tellus. Pellentesque efficitur efficitur nisl, suscipit blandit mauris. Quisque consectetur tincidunt suscipit. Nullam fermentum dictum quam vel volutpat. Phasellus eleifend molestie neque id varius. Aenean convallis ornare nisi vitae blandit. Phasellus imperdiet, diam vel congue blandit, quam felis vehicula tellus, eget lacinia dui quam vel metus. Proin eleifend volutpat magna et convallis. Nam pharetra, orci eu aliquet efficitur, turpis leo consequat purus, sed fringilla metus arcu ac elit.</p>
<p class="text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla diam quis turpis eleifend, ac molestie diam consectetur. In at augue tellus. Pellentesque efficitur efficitur nisl, suscipit blandit mauris. Quisque consectetur tincidunt suscipit. Nullam fermentum dictum quam vel volutpat. Phasellus eleifend molestie neque id varius. Aenean convallis ornare nisi vitae blandit. Phasellus imperdiet, diam vel congue blandit, quam felis vehicula tellus, eget lacinia dui quam vel metus. Proin eleifend volutpat magna et convallis. Nam pharetra, orci eu aliquet efficitur, turpis leo consequat purus, sed fringilla metus arcu ac elit.</p>
</div>
<div class="col-md-6">
</div>
</div>
</div>
</section>
.CSS
*,
*:after,
*::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
body {
background-color: #191617;
}
section {
padding: 130px 0;
overflow: hidden;
}
section::before,
section::after {
position: absolute;
content: '';
pointer-events: none;
}
#third-section {
height: auto;
font-family: 'Oswald', sans-serif;
font-size: 18px;
font-weight: 300;
line-height: 3rem;
color: #dcdcdc;
background-image: url('https://i.stack.imgur.com/QvxCo.jpg');
background-position: center;
background-size: cover;
}
#third-section h1 {
font-size: 72px;
color: #dcdcdc;
text-transform: uppercase;
}
在 CSS 中使用它：
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
这应该会有所帮助。
使用scrollspy.js和/或视差.js以获得干净的效果(您也可以尝试使用纯CSS，因为其他答案建议您这样做)
PS：为了响应式考虑，我不建议使用px或em进行尺寸调整