JSを使用した水平視差スクロール

Question

水平視差効果を得ようとしています。私は親divの中に2つの子divがあります。別のスピードでスクロールしながら、両方のdivを反対方向に動かしたい。しかし、それは動作していません。私はトップと左のプロパティの使用がエラーの理由かもしれないと思う。しかし、正確な位置に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：私は、スクロールの左または右のdivに#imageと＃画像2を移動するために使用しています

#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：

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;}