Paralaksa efekt skoków

Question

mam efektu paralaksy na moim miejscu, ale na przewijanie wydaje się dość nerwowy, co następuje:

Oto kod:

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>

AKTUALIZACJA: Podczas dalszych testów wygląda na to, że działa doskonale w przeglądarce Chrome, jednak Safari: & FireFox pokazuje problem.

Answer 1

Nie widzę niczego "niewłaściwego" w kodzie. Założę się, że przyczyną jest 2,1MB twojego obrazu, który został zmieniony z 2500px na szerokość okna. Weź pod uwagę, że przeglądarka próbuje "pomalować" obraz i obliczyć pozycję na każdej wartości przewijania ...
Podejdę do tego z pozycją w tle w CSS, ale utrzymując ją, problem wydaje się być skoncentrowany na wydajności . To, co robisz w JS, jest trochę nieefektywne, ponieważ najpierw wybierasz wszystkie pętle przez nie, a następnie ponownie aplikujesz do nich wszystkich w każdej pętli, przeliczając pozycję, ponownie szukając ich. Podczas przechodzenia przez elementy możesz użyć elementu this i zastosować na nim zmianę. Zaoszczędź $ this do zmiennej, aby nie zastosować jQuery dwukrotnie na tym samym elemencie i zaoszczędzić trochę zasobów, ale w tym przypadku może nie być tak ważne.
Tutaj, na moim laptopie, nie widzę, żeby był podniecony. Spróbuj tego i użyj mniejszego obrazu, aby sprawdzić, czy poprawia on nieco wydajność.

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

will-change bym dodać do swoich atrybutów CSS. Pomaga to przeglądarce w zrozumieniu sposobu obsługi elementów. Przygotuje przeglądarkę do animacji, więc nie będzie "zaskoczona", że musi zmienić wygląd elementu.

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

Po drugie, należy eksperymentować z różnymi innymi technikami oprócz przy użyciu atrybutu top. Wypróbuj background-position, margin-top lub transform: translate(0, Xpx). Mam nadzieję, że ten ostatni najbardziej.

Answer 3

Myślę, że to nie kod to problem, ale przewijanie. Większość myszy ma małe nacięcia w kółku przewijania.

To sprawia, że ​​na nierównym przewijania na prawie wszystkich stronach internetowych. Klawisze ze strzałkami mają ten sam efekt. Page Up i Page down są naprawdę niespokojne. Możesz spróbować znaleźć mysz, która ma płynne przewijanie, ale poza tym nie sądzę, że istnieje rozwiązanie.