私が下にスクロールすると画像を動かすにはどうすればいいですか？

Question

は、ここで私が達成したいものの一例である： https://www.flambette.com/en/

私は画像のCSSプロパティを変更しようとしましたが、その効果は私のニーズを満たしていません。 私は、次のコードを試してみました：

mydocument.on('scroll',function() { 
     if (mydocument.scrollTop() > 10 && mydocument.scrollTop() < 200) { 
     $('#first').css('top', '320px'); 
     $('#first').css('left', '215px'); 
     $('#first').css('transition', '0.5s'); 
     } 
     else { 
     $('#first').css('top', '300px'); 
     $('#first').css('left', '200px'); 
     $('#first').css('transition', '0.5s'); 
     } 
}); 

これは、あなたが10と200ピクセルの間でスクロールしたときに画像を移動することになっています。

Answer 1

var container = document.getElementById('container'); 
 
var windowHeight = window.innerHeight; 
 
var windowWidth = window.innerWidth; 
 
var scrollArea = 1000 - windowHeight; 
 
var square1 = document.getElementsByClassName('square')[0]; 
 
var square2 = document.getElementsByClassName('square')[1]; 
 

 
// update position of square 1 and square 2 when scroll event fires. 
 
window.addEventListener('scroll', function() { 
 
    var scrollTop = window.pageYOffset || window.scrollTop; 
 
    var scrollPercent = scrollTop/scrollArea || 0; 
 

 
    square1.style.left = scrollPercent*window.innerWidth + 'px'; 
 
    square2.style.left = 800 - scrollPercent*window.innerWidth*0.6 + 'px'; 
 
});

body { 
 
    overflow-x: hidden; 
 
} 
 

 
.container { 
 
    width: 100%; 
 
    height: 1000px; 
 
} 
 

 
.square { 
 
    position: absolute; 
 
} 
 

 
.square-1 { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
    top: 600px; 
 
} 
 

 
.square-2 { 
 
    width: 120px; 
 
    height: 120px; 
 
    background: black; 
 
    left: 800px; 
 
    top: 800px; 
 
}

<div class="container" id="container"> 
 
    <div class="square square-1"></div> 
 
    <div class="square square-2"></div> 
 
</div>

あなたを助けるために願っています。

Here you can see more examples可動要素とスクロールイベントについて