Wie Elemente auf Maus Scroll verschieben?

Question

Hier ist mein HTML und CSS-Code-Snippet:

.clouds { 
 
    background-image: url('http://placehold.it/1200x1200'); 
 
    background-repeat: no-repeat; 
 
    display: block; 
 
} 
 
.cloud-1 { 
 
    width: 138px; 
 
    height: 83px; 
 
    position: absolute; 
 
    left: 200px; 
 
    top: 350px; 
 
} 
 
.cloud-2 { 
 
    width: 100px; 
 
    height: 52px; 
 
    position: absolute; 
 
    left: 625px; 
 
    top: 400px; 
 
    background-position: -935px -9px; 
 
} 
 
.cloud-3 { 
 
    width: 110px; 
 
    height: 58px; 
 
    position: absolute; 
 
    left: 450px; 
 
    top: 350px; 
 
    background-position: -1033px -6px; 
 
}

<div id="animations"> 
 
    <div class="clouds cloud-1"></div> 
 
    <div class="clouds cloud-2"></div> 
 
    <div class="clouds cloud-3"></div> 
 
    <div class="clouds cloud-4"></div> 
 
    <div class="clouds cloud-5"></div> 
 
    <div class="clouds cloud-6"></div> 
 
    <div class="clouds cloud-7"></div> 
 
    <div class="clouds cloud-8"></div> 
 
    <div class="clouds cloud-9"></div> 
 
    <div class="clouds cloud-10"></div> 
 
    <div class="clouds cloud-11"></div> 
 
    <div class="clouds cloud-12"></div> 
 
    <div class="clouds cloud-13"></div> 
 
</div>

Was ich erreichen will, ist Wolken auf die Website Kanten, wenn Rollen Benutzer nach unten zu bewegen. Meine Wolken sind ein Bild Sprite, und jede Wolke ist absolut positioniert. Sorry, aber ich bin neu in der Webentwicklung und muss noch viel lernen.

Answer 1

Dies wird am besten durch Javascript erreicht, denke ich. Mit JQuery sollte dies nicht zu schwer sein.

---

prüfen, wie weit Sie gescrollt werden, zuerst:

var scrollPercent = 100 * $('body').scrollTop()/($('body).height() 

, dass Sie den Prozentsatz gibt Ihnen nach unten gescrollt haben. Dann könnte man so etwas tun:

$('.cloud-1').css('left', (200/scrollPercent) + 'px'); 

, dass das Bild gesetzt wird 200 px von zu Beginn links, in Richtung 2 px nach links, wenn der Benutzer auf der Seite.

aktualisiert diese Werte auf der Taste:

$('body').on('scroll', function(){ 
    // methods described above here 
} 

---

note

Der Code ist nicht getestet, es ist ein Leiter in der richtigen Richtung nach oben. Passen Sie sich an Ihre Bedürfnisse an und sehen Sie sich die jquery Dokumentation an.

Answer 2

Ihr Code-Snippet arbeitet mir nicht (weil Sie relativen Pfad zu Ihrem Bild verwendet ...), aber Sie sollten wohl so tun es (ersetzen Sie die Höhe mit der Höhe der Benutzer blättern hat)

JQuery:

$(window).scroll(function() { 
    var scr = $(window).scrollTop(); 
    var height = 300px; 
    if(scr > height) { 
     $(document.body).addClass('fix-clouds'); /* add the class on scroll */ 
    } else { 
     $(document.body).removeClass('fix-clouds'); /* remove when we go back to top */ 
    } 
}); 

CSS:

.fix-clouds clouds { 
    your CSS 
}