how to achieve rotating background on scroll

Question

folks I want to make a demo design of this and I got confused how to achieve this. should I go for parallax scrolling or should I prefer skrollr or scrollmagic or just simple css with few jquery code? suggest the simplest way to achieve this. Thanks :)

Answer 1

Here is working example;

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

In this particular case they used CSS with the help of JavaScript but the part what you are watching at is CSS (really fluent) and it get executed my an scroll handler.

In this specific case they used the transform: translate3d() property to rotate the yellow background.

Answer 3

If you want to rotate the background when scrolling, look this: https://codepen.io/sarkiroka/pen/gByRmd

In nutshell it uses the sidebar elements for this effect. This elements has :before property with background setting, and a little javascript calculate the rotating degree from the scrollTop. And this javascript overwrite the defined css rule transform property.