2

我有一个对象，只要用户滚动页面并且该对象当前在视图中，我就想旋转它。

因此，如果我的对象在第一次加载网站时位于页面中间，我希望它在用户向下滚动时旋转“向右”。当用户向上滚动时，它将向“左”旋转。

我不知道当对象在视图中时如何让它旋转，而不仅仅是当视图顶部被对象击中时。我正在使用 jQuery Waypoint 来检测滚动，并使用 jQuery Transit 来为我的对象设置动画。：

$('#home-spinner').waypoint(function (event, direction) {
    console.log("Waypoint moved "+direction);
    if(direction==='down'){
        $("#home-spinner").transition({ rotate: '+180deg' },1000,'ease');
    }
    if(direction==='up'){
        $("#home-spinner").transition({ rotate: '-180deg' },1000,'ease');
    }
});
4

2 回答 2

1

这就是offsetWaypoints 中的选项的用途。如果您希望整个元素都在视图中（在视口的底部），您可以使用 value "bottom-in-view"：

$('#home-spinner').waypoint(function (event, direction) {
    console.log("Waypoint moved "+direction);
    if(direction==='down'){
        $("#home-spinner").transition({ rotate: '+180deg' },1000,'ease');
    }
    if(direction==='up'){
        $("#home-spinner").transition({ rotate: '-180deg' },1000,'ease');
    }
}, {
    offset: "bottom-in-view"
});
于 2014-03-15T18:09:20.450 回答
0

对航点没有太多经验，但是..你可以做这样的事情......

var win_height = $(window).height();
    var spinner_position = $('#home-spinner')

$(window).on('scroll', function() {
    var current_position = $(document).scrollTop();
    if (current_position >= spinner_position && current_position < spinner_position + win_height) {
        // spin it here
    };
});

您可能希望存储页面上的先前位置并将 current_position 与其进行比较以确定用户滚动的方向。同样，您会希望win_height在重新调整大小时重新评估变量。我相信你会弄清楚如何将它与你的插件一起使用。

于 2014-03-08T00:51:59.830 回答