스크롤 할 때 CSS3 변환

누구나 좋은 입문서를 알고 있습니까? (여기에 보이는 것처럼 : http://www.contrastrebellion.com/) 나는 그 사이트에서 사용 된 코드를보고 내가 필요로하는 것을 꺼내기가 어색함을 발견했다. 또한 여기에 본 :스크롤 할 때 CSS3 변환

많은 감사, 감사

편집 내가 무엇을 달성하고자하는 http://playgroundinc.com/

: 나는 아래로 스크롤

는 PNG를 회전하려면와 일치하도록 회전 속도 스크롤 속도.

출처

2012-02-02 malicedix

흥미로운 사이트. –

올바른 방향으로 가야합니다 : http://www.ianlunn.co.uk/blog/code-tutorials/recreate-nikebetterworld-parallax/.

여기에 다음이 표시됩니다.

스크롤 할 때 회전 애니메이션에 사용됩니다.

http://jsfiddle.net/EnSkJ/2/

코드 :

var sdegree = 0; 

$(window).scroll(function() { 

    sdegree ++ ; 
    sdegree = sdegree + 3 ; 
    var srotate = "rotate(" + sdegree + "deg)"; 
    $("img").css({"-moz-transform" : srotate, "-webkit-transform" : srotate}); 
});

출처

2012-02-02 13:54:37

감사합니다. 나는 그것을 살펴볼 것입니다. 필자가 직접 원하는 것을 성취 할 수 있을지 확신 할 수는 없지만 시차 효과를 얻으려면 이미지 레이어를 이동하는 대신 화면 이동 속도와 스크롤 속도가 일치하도록 PNG를 회전시키고 싶습니다. – malicedix

바이올렛으로 답을 업데이트했는데 완벽하지는 않지만 기본을 제공합니다. –

놀라운, 정말 고마워요! – malicedix

당신은 물론 Infra Stank's answer 같은 간단한 방법을 사용할 수 있습니다. 그러나 더 복잡한 것이 필요한 경우 "애니메이션" 시도 jQuery Transe. 이 문제는 정확히 해결 방법입니다. 현재 스크롤 오프셋 (CSS3-Transforms 등)을 기반으로 거의 모든 것을 변경할 수 있습니다. 귀하의 경우에는

이 같은 것을 시도 :

$('img').transe({ 
    start: 0, 
    end: 1600, 
    css: 'transform', 
    from: 'rotate(0deg)', 
    to: 'rotate(360deg)' 
});

Demo

BTW : 당신이 부드러운 것 같은, 당신은 그것의 CSS-플러그인과 TweenLite을 포함 할 수 있습니다.

출처

2013-02-22 12:29:31 yckart

먼저 this site을보고 경험해보십시오. 나는 당신이 당신의 프로젝트에서 그러한 경험을 요청했다고 생각합니다. 해당 페이지 끝 부분에 프로젝트 (사이트)에서 구현할 jquery 플러그인이 표시됩니다. 문제가 해결되기를 바랍니다.

출처

2013-03-06 17:22:32 mukilane

스크롤 할 때 CSS3 변환

답변

관련 문제