Question

我试图获得水平视差效果。我在父div中有两个子div。我想在以不同速度滚动的同时向相反方向移动div。但它不起作用。我怀疑使用top和left属性可能是错误的原因。但是我确实需要top和left属性来将div放在准确的位置。

我的HTML：

<div id='frst' style= 'height:600px;'>
</div>
<div class= 'div1' style= " position:relative;width: 100%; height: 500px; background-color: red; top: 20%;">
    <div id= 'image'>
    </div> 
    <div id= 'image2'>
    </div>
</div>

没有我的CSS：

#image{ background:green ; width:100px; height: 100px; top:20px; position: absolute;}
#frst{color:white; }
#image2{ background: yellow;  width:100px;height: 100px; left: 60%;top:29px;position: absolute;}

JS我用来在滚动时向左或向右移动div #image和＃image2：

function parallax() {
   var image= document.getElementById('image');
   var image2= document.getElementById('image2');

   image.style.margin-right= -(window.pageYOffset/ 10) + 'px';
   image2.style.margin-left= -(window.pageYOffset/ 9) + 'px';

}

window.addEventListener("scroll",parallax,false)

Answer 1

这是你期待的吗？ https://jsfiddle.net/0or5cgz4/7/

添加权利#image和#first作为位置相对和设置宽度/高度

#image{ background:green ; width:100px; height: 100px; top:0px;right:0; position: absolute;}
#frst{color:white;position:relative; width:100px;height:100px;}

使用JS进行水平视差滚动

1 个答案: