시차 - 4 개 이상의 레이어를 추가 할 수 있습니까?

Question

여기 시차 스크롤에 대한 내 코드가 있습니다. http://violetoeuvre.com/Exp_4.html을 참조하십시오.

4 개 이상의 레이어를 추가 할 때마다 페이지가로드되지 않습니다. 이것은 대역폭 문제일까요? 4 층 이상의 웹 사이트를 본 것 같습니다.

다른 코드를 사용해야합니까? 사전에

<script type="text/javascript"> 
var wf_pbb_object = [ 
{bc:"rgba(0, 0, 0, 0)"}, 
{img:"images/Exp_4/bluediamond.png", mm:false, ms:true, mms:1, mss:30, mmd:1, mso:"v", msd:1, im:"image", pr:"both", mma:"both", ofs:{x:0, y:0}, zi:4, sr:false, sb:false, isr:false, isb:false}, 
{img:"images/Exp_4/bluestripe.png", mm:false, ms:true, mms:1, mss:40, mmd:1, mso:"v", msd:-1, im:"image", pr:"both", mma:"both", ofs:{x:0, y:0}, zi:1, sr:false, sb:false, isr:false, isb:false}, 
{img:"images/Exp_4/greenlock.png", mm:false, ms:true, mms:1, mss:50, mmd:1, mso:"v", msd:1, im:"image", pr:"both", mma:"both", ofs:{x:0, y:0}, zi:2, sr:false, sb:false, isr:false, isb:false}, 
{img:"images/Exp_4/silversq.png", mm:false, ms:true, mms:1, mss:60, mmd:1, mso:"v", msd:1, im:"image", pr:"both", mma:"both", ofs:{x:0, y:0}, zi:2, sr:false, sb:false, isr:false, isb:false} 
]; 
</script> 

감사합니다!

Answer 1

스크롤링에 대한 재 페인트가 0.5 초 이상 걸리므로 부드러운 애니메이션을 얻으려면 60fps를 목표로해야합니다!

나는 이미지의 크기가 문제가 될 수 있다고 생각하지만 그 정도 깊이는 보지 못했습니다.

Chrome 개발자 도구를 사용하는 경우 타임 라인으로 이동하여 기록을 켜고 페이지를 스크롤하면 페인트가 걸리는 시간이 표시됩니다.