시차 배경 성능 및 동작

Question

지금까지 요소 배경 이미지 (뷰포트 크기에 맞게 늘리는)에 시차 효과가있는 가로 스크롤링 사이트를 만들었습니다. 효과를 내기 위해 Stellar.js 라이브러리를 사용했습니다.

$.stellar({ 
    horizontalScrolling: true, 
    verticalScrolling: false, 
    horizontalOffset: $(window).width() 
}); 

그러나 두 가지 문제가 있습니다.

1. 이미지가 완전히 사라지기 전에 '이미지가 부족한'경향이 있습니다. 흰색 배경 아래에 표시합니다. 이 효과의 심각도는 뷰포트의 크기와 모양에 따라 다르므로 이미지 크기, 종횡비 또는 정의 된 스크롤 비율과 관련된 수학을 계산하는 것은 가치가 없다고 생각합니다. 스텔라 안에서 스크롤 비율을 "자동"으로 만들 수있는 방법이 있습니까? 그렇다면 백그라운드가 '절판되지 않습니다'(또는 그렇게하는 대안 시차 라이브러리가 있습니까?)
2. 브라우저와 컴퓨터에 관계없이 효과의 성능이 저하됩니다. background-size: cover을 제거하면 다소 개선되지만 "충분"하지는 않습니다. img 요소를 사용하면 배경 이미지보다 성능이 향상됩니까? 그것은 거대한 변화와 그것을하는 지저분한 방법이지만, 그것이 느린 스크롤을 수정한다면 그것은 가치가있을 것입니다.

미리 감사드립니다.

Answer 1

@ Shivam이 제안 했으므로 대신 skrollr.js를 사용하십시오. 나는이 똑같은 문제를 안고 있었다. 참조 : Parallax background image that fills container

Skrollr.js는 시작 오프셋을 0으로 설정하여 배경을 표지로 설정해도 이미지 아래에 공간이 생기지 않도록합니다.

내 사이트에서이 작업을 수행하기 위해 수행 한 자습서는 다음과 같습니다. http://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/. 지시 사항에서 누락 된 유일한 점은 1 단계에서 예제 파일과 함께 제공되는 imagesloaded.js 파일을 포함해야한다는 것입니다. 희망이 도움이됩니다! 나는 이것에 대한 해결책을 찾기 위해 노력했다.