JQuery 시차 효과. OnScroll 이벤트 매우 느림보

Question

js에서 간단한 Parallax 효과를 만들려고합니다.

내 코드입니다 :

function parallax(){ 
    $(".parallax").css("backgroundPosition","50% "+$(document).scrollTop()+"px"); 
} 
parallax(); 
$(window).scroll(function() { 
    parallax(); 
}); 

https://jsfiddle.net/makitos666/whb6Ldup/3/

그것은 완벽하게 작동,하지만 성능 문제가 있습니다. 마우스 휠을 사용하여 스크롤을 만들면 100px 단계가 이루어지며 모든 것이 잘 작동합니다. 그러나 터치 패드 나 스마트 폰과 같은 터치 가능한 입력을 사용하면 훨씬 더 정밀도가 높아지며 스크롤 이벤트는 여러 번 트리거됩니다. 내 노트북에서는 모두 잘 작동하지만 느린 컴퓨터 나 Android 모바일을 사용하면 효과가 매우 느려집니다.

이것이 가능한지 알고 계십니까? 아니면 모든 것을 바꿀 필요가 있습니까?

또는 응답 성이 뛰어나고 모바일 친화적 인 라이브러리가 좋지 않은 것으로 알고 있다면이 또한 나에 관심이 있습니다.

대단히 감사합니다!

Answer 1

음 자신에 의해 조사 다양한 시간 후에, 이것은 나의 결론이다 :

JS OnScroll 이벤트는 최고의 resposive 시차 효과, 이것은 단지, 전용 그래픽 카드와 함께 작동을 만드는 방법이 아니다 (나를 위해) resposive되지 않습니다.

솔루션

은 이것이다 : https://codepen.io/keithclark/pen/JycFw

.slide { 
    position: relative; 
    padding: 25vh 10%; 
    width: 100%; 
    height: 100%; 
} 
#slide1:before { 
    background-image: url("http://lorempixel.com/640/480/abstract/4/"); 
    transform: translateZ(-1px) scale(2); 
    z-index:-1; 
} 

#slide2 { 
    background-image: url("http://lorempixel.com/640/480/abstract/3/"); 
    background-attachment: fixed; 
} 

순수 CSS 시차 효과 (keithclark에 의해). 내 것과 같지만 훨씬 더 효과적입니다. 그 다른 해결책을 안다면, 나는 그것을 알고 싶다! ;)

UPDATE

음,이 솔루션은 작동하지만 backbround - 첨부 것으로 보인다 : 고정 그나마 안드로이드 휴대폰에서 잘 작동합니다. 솔루션을 계속 검색 중입니다.