CODEWITHSUNDEEP
javascriptjquerycssrotationfullpage.js
Gonzalo Fernandez
Gonzalo Fernandez

Reputation: 235

Full page scroll with rotating logo

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/

Upvotes: 0

Views: 509

Answers (2)

Alvaro
Alvaro

Reputation: 41605

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

Upvotes: 1

airi
airi

Reputation: 585

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/

Upvotes: 0

Related Questions