Parallax-Effekt Springen

Question

ich eine Parallaxe auf meiner Seite haben, aber es beim Scrollen scheint eher schreckhaft wie folgt:

Hier ist der Code:

jQuery(document).ready(function() { 
 
     jQuery(window).scroll(function() { 
 
     jQuery('*[class^="prlx"]').each(function(r) { 
 
      var pos = $(this).offset().top; 
 
      var scrolled = $(window).scrollTop(); 
 
      jQuery('*[class^="prlx"]').css('top', +(scrolled * 0.6) + 'px'); 
 
     }); 
 
     }); 
 
    });

*[class^="prlx"] { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 300%; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: -1; 
 
    background-size: 110%; 
 
} 
 
.prlx-2 { 
 
    background-image: url('http://www.roscodigitalmedia.co.uk/rosco/wp-content/uploads/2015/12/bigstock-Artist-Photographer-Retouches-91840682.jpg'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="container-fluid homeHeader"> 
 
    <div class="prlx-2"> 
 

 
    </div> 
 
</div>

UPDATE: Bei weiteren Tests scheint es aber in Chrome einwandfrei zu funktionieren Safari & FireFox zeigt das Problem an.

Answer 1

Ich sehe nichts "falsch" auf Ihrem Code. Ich wette, dass die Ursache die 2,1 MB Ihres Bildes sind, die Größe wird von 2500 Pixel auf die Fensterbreite angepasst. Berücksichtigen Sie, dass der Browser versucht, das Bild zu "malen" und die Position auf jedem Scroll-Wert zu berechnen ... Ich würde es mit Hintergrundposition auf CSS nähern, aber bei Ihnen bleibt, scheint das Problem auf die Leistung konzentriert . Was Sie auf JS tun, ist ein wenig ineffizient, weil Sie zuerst alle Schleife durch sie auswählen, und dann Sie erneut auf alle von ihnen in jeder Schleife eine Positionsneuberechnung anwenden, indem Sie erneut nach ihnen suchen. Beim Durchschleifen von Elementen können Sie das Element this verwenden und die Änderung darauf anwenden. Speichern Sie $ this in einer Variablen nur, um jQuery nicht zweimal auf dasselbe Element anzuwenden und ein wenig Ressourcen zu sparen, aber in diesem Fall ist es möglicherweise nicht so wichtig.
Hier auf meinem Laptop sehe ich es nicht nervös. Versuchen Sie das und verwenden Sie ein kleineres Bild, um zu sehen, ob es die Leistung etwas verbessert.

jQuery(document).ready(function() { 
 
     jQuery(window).scroll(function() { 
 
     jQuery('*[class^="prlx"]').each(function(r) { 
 
      var $this = $(this); 
 
      var pos = $this.offset().top; 
 
      var scrolled = $(window).scrollTop(); 
 
      $this.css('top', +(scrolled * 0.6) + 'px'); 
 
     }); 
 
     }); 
 
    });

*[class^="prlx"] { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 300%; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: -1; 
 
    background-size: 110%; 
 
} 
 
.prlx-2 { 
 
    background-image: url('http://www.roscodigitalmedia.co.uk/rosco/wp-content/uploads/2015/12/bigstock-Artist-Photographer-Retouches-91840682.jpg'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="container-fluid homeHeader"> 
 
    <div class="prlx-2"> 
 

 
    </div> 
 
</div>

Answer 2

ich will-change zu Ihrem CSS Attribute hinzufügen würde. Dies hilft dem Browser, herauszufinden, wie mit Elementen umzugehen ist. Es bereitet den Browser auf eine Animation vor, so dass es nicht "überrascht" ist, dass es das Aussehen eines Elements ändern muss.

*[class^="prlx"] { 
    ... 
    will-change: top; 
} 

Zweitens sollten Sie mit verschiedenen anderen Techniken experimentieren neben der Verwendung top Attribut. Versuchen Sie background-position, margin-top oder transform: translate(0, Xpx). Ich hoffe auf Letzteres am meisten.

Answer 3

Ich denke, es ist nicht der Code, der das Problem ist, sondern das Scrollen. Die meisten Mäuse haben kleine Einkerbungen in ihrem Scrollrad.

Dies macht für unebene Scrollen auf fast allen Webseiten. Pfeiltasten haben den gleichen Effekt. Bild hoch und Bild runter sind wirklich nervös. Sie könnten versuchen, eine Maus zu finden, die reibungsloses Scrollen hat, aber ansonsten denke ich nicht, dass es eine Lösung gibt.