Full page scroll with rotating logo

Question

I have a website which uses Fullpage.js and I need the logo to rotate 180 degrees as I scroll through each of the sections.

How can i do this

Here is the link : http://www.bfgstudio.co.uk/testing/VIM/

Answer 1

You should make use of the onLeave callback or if you prefer, the afterLoad callback.

This way you can fire something when you are moving from one to another slide.

jQuery:

$.fn.fullpage({
    afterLoad: function (anchor, index) {
        $('#cog').toggleClass('active');
    }
});

CSS

#cog {
    background: white;
    border-radius: 10px;
    width: 40px;
    height: 40px;
    position: fixed;
    top: 20px;
    left: 20px;
}
#cog.active {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

Live example

Answer 2

there are many answer out there , you should google :

Example :

var $cog = $('#cog'),
$body = $(document.body),
bodyHeight = $body.height();

$(window).scroll(function () {
    $cog.css({
        'transform': 'rotate(' + ($body.scrollTop() / bodyHeight * 360) + 'deg)'
    });
});

http://jsfiddle.net/kDSqB/

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

http://jsfiddle.net/g3k6h/5/