javascript - 带有旋转徽标的整页滚动

Question

我有一个使用 Fullpage.js 的网站，当我滚动浏览每个部分时，我需要将徽标旋转 180 度。

我怎样才能做到这一点

这是链接： http ://www.bfgstudio.co.uk/testing/VIM/

Answer 1

您应该使用onLeave回调，或者如果您愿意，可以使用afterLoad回调。

这样，当您从一张幻灯片移动到另一张幻灯片时，您可以触发一些东西。

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;
}

活生生的例子

Answer 2

那里有很多答案，你应该谷歌：

例子 ：

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/