Wie kann ich ein Bild bewegen, wenn ich nach unten scrolle?

Question

Hier ist ein Beispiel dafür, was ich erreichen möchte: https://www.flambette.com/en/

ich versucht habe, die CSS-Eigenschaften der Bilder zu ändern, aber die Wirkung meine Bedürfnisse nicht befriedigen. Ich habe den folgenden Code versucht:

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

Dies sollte ein Bild bewegen, wenn Sie zwischen 10 und 200 px blättern.

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>

Hoffnung, Ihnen zu helfen.

Here you can see more examples über bewegliche Elemente und Scroll-Ereignisse.