Jquery CSS Hintergrundbild rotate

Ich habe ein Hauptdiv mit einem Hintergrundsatz (Zahnrad), der sich über Javascript (Scroll) dreht. Darin habe ich ein anderes div (stop-rotate) welches ich nicht mehr rotieren möchte. Ich möchte nur den Hintergrund rotieren lassen, nicht den Inhalt.Jquery CSS Hintergrundbild rotate

Wie kann ich die 2. div von rotieren stoppen? Oder gibt es einen leichteren Workaround?

Hier ist meine JSFiddle

HTML:

<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:

$(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, 
     }); 
    }); 
})

Wie kann ich die zweite div Drehung zu stoppen?

Quelle

2016-05-07 Arthur

Sie können das 2. Div in die entgegengesetzte Richtung rotieren lassen.

$(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, 
     }); 

    }); 
})

Hier ist JSFiddle: https://jsfiddle.net/3xcqjcsr/

Quelle

2016-05-07 11:25:27 adys

Antwort

Verwandte Themen