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插件不会触发正常的浏览器滚动，因此您必须使用OnePage Scroll的afterMove事件来触发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，这可以通过在this example中添加选项scrollBar:true来解决此问题，同时提供更好的用户体验保留滚动条杆

如fullPage.js FAQs中所述：

  

Parallax，以及许多其他依赖于网站滚动的插件，会侦听javascript的scrollTop属性。 fullPage.js实际上并不滚动网站，但它会更改网站的top或translate3d属性。仅当使用fullPage.js选项scrollBar：true或autoScrolling：false时，它才会以scrollTop属性可访问的方式实际滚动网站。

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

此外，fullPage.js提供与旧版浏览器的兼容性，例如IE＆gt; 7，Opera 12 ......它提供了更多选项，这些选项非常有用。