スクロールの回転の背景を達成する方法

Question

人私はデモのデザインをthisにしたいと思っており、これを達成する方法を混乱させました。私は視差スクロールのために行く必要がありますか？skrollrやscrollmagic、またはjqueryコードの数が少ない単純なCSSを好むべきですか？これを達成する最も簡単な方法を示唆しています。 ありがとう:)

Answer 1

ここでは動作例です。彼らはあなたが何であるかJavaScriptのの助けを借りなく、一部でCSSを使用し、この特定のケースで

Htmlの

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

の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()プロパティを使用するこの特定の場合において

。