어떻게 스크롤을 회전 배경을 달성하기 위해

Question

여러분 나는 this의 데모 디자인을 만들고 싶습니다. 그리고 이것을 달성하는 방법을 혼란스럽게 생각합니다. 시차 스크롤을해야합니까? 아니면 skrollr 또는 scrollmagic 또는 jquery 코드가 거의없는 간단한 CSS를 선호해야합니까? 이를 달성하는 가장 간단한 방법을 제안합니다. 감사합니다 :)

Answer 1

여기는 작동 예제입니다;

HTML을

<div class="rotate"></div> 

가 의 도움 자바 스크립트하지만 당신이 어떤 부분 CSS 사용이 특정 경우 CSS는

body{ 
    height: 1000px; 
    background: yellow; 
} 

.rotate{ 
    background: url("http://i.imgur.com/zZ3fMuh.png"); 
    width: 101px; 
    height: 102px; 
    position: fixed; 
} 

JS

$(function() { 
    var rotation = 0, 
     scrollLoc = $(document).scrollTop(); 
    $(window).scroll(function() { 
     var newLoc = $(document).scrollTop(); 
     var diff = scrollLoc - newLoc; 
     rotation += diff, scrollLoc = newLoc; 
     var rotationStr = "rotate(" + rotation + "deg)"; 
     $(".rotate").css({ 
      "-webkit-transform": rotationStr, 
      "-moz-transform": rotationStr, 
      "transform": rotationStr 
     }); 
    }); 
}) 

Answer 2

와트 힌트는 CSS (정말 유창함)이며 스크롤러 처리기를 실행합니다.

이 특정 사례에서는 노란색 배경을 회전하기 위해 transform: translate3d() 속성을 사용했습니다.