javascript - 带有旋转 Logo 的整页滚动

Question

我有一个使用 Fullpage.js 的网站，我需要在滚动浏览每个部分时将 Logo 旋转 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;
}

Live example