1

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

每次更改幻灯片时，我都想使用此插件对一个动画的每个部分的所有元素进行操作： https ://github.com/matthieua/WOW

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

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

有人有想法吗？

谢谢

4

2 回答 2

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
    }
});
于 2015-01-26T01:09:03.040 回答
1

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

我鼓励您改用fullPage.js ，它通过添加您在本示例scrollBar:true中看到的选项来解决此问题，并提供更好的用户体验来保持滚动条。

如fullPage.js 常见问题解答中所述：

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

如果您不想使用该scrollBar选项，您仍然可以使用回调，例如afterLoad或文档onLeave中详述的回调。

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

于 2015-01-26T15:43:40.063 回答