Arthur Arthur - 7 months ago 88
HTML Question

Jquery CSS Background Image rotate

I have a main div with a background set to it (gear) which is rotating via javascript (scroll). Inside it I have another div (stop-rotate) which I want to stop from rotating. I only want the background to rotate, not the content as well.

How can I stop the 2nd div from rotating? Or is there any easier workaround it?

Here is my 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,
});
});
})


How can I stop the 2nd div from rotating?

Answer

You can make the 2nd div rotate in the opposite direction.

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

    });
})

Here is JSFiddle: https://jsfiddle.net/3xcqjcsr/