视差滚动移动的星座

Question

(使用Dreamweaver(

我正在尝试创建一个引人注目的广告，其中的图形移动时使用滚动条。我正试图让不同的层以不同的速度和方向移动，同时用户在页面上走得更远。

我已经设法做到了，所以我的图层从右向左移动，但我似乎无法让它们从左向右移动。

我试着通过将时间(*(改为除法(/(，删除减号(-(来稍微修改代码，并尝试将图像放在不同的div部分，但似乎不起作用。

我的代码如下。

HTML你好世界

<script type="text/javascript">
var sky = document.getElementById("sky");
var moon = document.getElementById("moon");
var city = document.getElementById("city");
var mc = document.getElementById("mc");
var text = document.getElementById("text");
var section1 = document.getElementById("section1");
window.addEventListener('scroll', function(){
var value = window.scrollY;
mc.style.right = -value / 0.5 + 'px';
sky.style.left = -value * 0.5 + 'px';
moon.style.left =  -value * 0.5 + 'px';
city.style.top = -value * 0.15 + 'px';
text.style.top = value * 1 + 'px';
section1.style.opacity = 1 -value*0.002;
})
</script>   

CSS

body
{
background: #0a2a43;
min-height: 1500px;
}
section
{
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
section:before
{
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: linear-gradient(to top, #0a2a43 , transparent);
z-index: 10000;
}
section:after
{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #0a2a43;
z-index: 10000;
mix-blend-mode: color;
opacity: .5;
}
section img
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
overflow: hidden;
}
section h2
{
position: relative;
color: #fff;
font-size: 14em;
text-shadow: 2px 4px #0a2a43;
z-index: 1;
cursor: none;}
#text {

position: relative;
color: "fff";
font-size: 10em;
z-index: 1;
}

#mc{
top: 700px;
left: 10px;
height: 300px;
width: 100px;
object-fit: cover;
pointer-events: none;
overflow: hidden;
}

Answer 1

我已经解决了它，我只是从"mc"；并保持左的风格

mc.style.left=value/0.5+'px'