WOW JS 不适用于一页滚动

Question

我使用这个插件： http://www.thepetedesign.com/demos/onepage_scroll_demo.html

每次你换幻灯片的时候，我想用这个插件对一个动画的每个部分的所有元素做： https://github.com/matthieua/WOW

其他时候我使用 WOW JS 并且效果很好但是这个组合 WOW JS + ONEPAGE SCROLL 不起作用..

只有第一个元素有效，其他幻灯片无法正确显示。

有人有想法吗？

谢谢

Answer 1

这是因为 OnePage Scroll 插件不会触发正常的浏览器滚动，所以你必须使用 afterMoveOnePage Scroll 的事件来触发 WOW 动画。

$(".main").onepage_scroll({
    afterMove : function(index){
        var this_slide = $(".main").eq(index);
        //you can perform a manual animation of this_slide, so check out the WOW Documentation
    }
});

Answer 2

正如@Burimi 所指出的，单页滚动实际上并不滚动网站，而是使用插件容器中的属性 translate3d。

我鼓励您使用 fullPage.js instead, which solves this issue by adding the option scrollBar:true as you can see in this example，同时提供更好的用户体验并保持滚动条。

如 fullPage.js FAQs 中所述：

Parallax, as well as many other plugins which depends on the scrolling of the site, listens the scrollTop property of javascript. fullPage.js doesn't actually scroll the site but it changes the top or translate3d property of the site. Only when using the fullPage.js option scrollBar:true or autoScrolling:false it will actually scroll the site in a way it is accessible for the scrollTop property.

如果您不想使用 scrollBar 选项，您仍然可以使用 afterLoad 或 onLeave 等回调，详见 in the docs.

此外，fullPage.js 提供与旧浏览器（如 IE>7、Opera 12...）的兼容性，并且它提供了更多选项，这非常有帮助。

WOW JS 不适用于一页滚动

WOW JS Not work with One page scroll

jquery

css

scroll

wow.js