시차 효과로 렌더링 문제가 발생했습니다.

Question

window.onscroll과 scrollTop을 사용하여 시차 효과를 만들려고하지만 뷰포트가 렌더링 된 후 onscroll을받는 것처럼 보이는 렌더링 문제가 계속 발생합니다. from this example (코드가 첨부되어 있음)을 볼 수 있듯이 상자의 움직임이 불규칙하고 고르지 않습니다.

이 동작은 모든 WebKit 기반 브라우저와 FireFox에서 동일합니다. 그것은 미리 만들어진 하나하지 "다시 발명"바퀴를 사용하여 가치가 있는지

자바 스크립트

$(document).ready(function() { 
    $('.box').each(function() { 
    $(this).data('y', $(this).offset().top); 
    }); 
}); 

$(window).scroll(function() { 
    var scroll = $(this).scrollTop(); 

    $('.box').each(function() { 
    var parallax = $(this).data('parallax'); 

    if (parallax) { 
     var y = $(this).data('y'); 
     var offset = (scroll - y) * parallax; 

     $(this).css('-webkit-transform', 'translateY(' + offset + 'px)'); 
    } 
    }); 
}); 

마크 업

<div class="red box">Lorem ipsum dolor sit amet.</div> 
<div class="green box" data-parallax="0.4">Consectetur adipiscing elit.</div> 
<div class="blue box" data-parallax="0.3">Nam consectetur dolor.</div> 

Answer 1

궁금해?

http://joelb.me/scrollpath/