Jquery CSS背景画像rotate

私は、javascript（スクロール）を介して回転している背景（歯車）を設定したメインdivを持っています。その中には、回転を止めたい別のdiv（停止回転）があります。私は、背景だけでなく、コンテンツを回転させたい。Jquery CSS背景画像rotate

第2桁の回転を停止するにはどうすればよいですか？それとも簡単な回避策がありますか？

$(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)"; 
     $(".gear").css({ 
      "-webkit-transform": rotationStr, 
      "-moz-transform": rotationStr, 
      "transform": rotationStr, 
     }); 
    }); 
})

がどのように回転する第二のdivを停止することができます：

<body> 


<div class="gear"> 
    <div class="stop-rotate"> 
     <h1 style="color:white">random text</h1> 
    </div> 
</div> 

</body>

CSS：

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

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

Javascriptをここで

は私のJSFiddle

HTMLのですか？

出典

2016-05-07 Arthur

2番目のdivを反対方向に回転させることができます。ここで

$(function() { 
    var rotation = 0, rotation2=0, 
     scrollLoc = $(document).scrollTop(); 
    $(window).scroll(function() { 
     var newLoc = $(document).scrollTop(); 
     var diff = scrollLoc - newLoc; 
     rotation += diff, scrollLoc = newLoc; 
     rotation2 -= diff, scrollLoc = newLoc; 
     var rotationStr = "rotate(" + rotation + "deg)"; 
     var rotationStr2 = "rotate(" + rotation2 + "deg)"; 

     $(".gear").css({ 
      "-webkit-transform": rotationStr, 
      "-moz-transform": rotationStr, 
      "transform": rotationStr, 
     }); 
     $(".stop-rotate").css({ 
      "-webkit-transform": rotationStr2, 
      "-moz-transform": rotationStr2, 
      "transform": rotationStr2, 
     }); 

    }); 
})

はJSFiddleです：https://jsfiddle.net/3xcqjcsr/

出典

2016-05-07 11:25:27 adys

答えて

関連する問題