您现在的位置是:首页 > 技术交流技术交流
fullpage.js和wow兼容问题
2023-02-19【技术交流】1871 人已围观
简介 因为项目是全屏竖向滚动网站,就用到了fullpage.js插件和动画插件wow。结果发现wow不会执行了,原来这二个插件有冲突,可以使...
因为项目是全屏竖向滚动网站,就用到了fullpage.js插件和动画插件wow。结果发现wow不会执行了,原来这二个插件有冲突,可以使用以下代码来兼容。
<script type="text/javascript"> $(document).ready(function() { $('#home').fullpage({ // sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'], anchors: ['page1', 'page2', 'page3', 'page4','page5'], // menu: '#menu', css3: true, scrollingSpeed: 1000, /*-------scrollBar 设置为 true ------*/ scrollBar: true, /*-------scrollBar 设置为 true -------*/ /*-------WOW.JS在fullpage之后执行----*/ afterRender: function(){ wow = new WOW({ animateClass: 'animated', }); wow.init(); /*---------------------WOW.JS在fullpage之后执行------------------------*/ } }); }); </script> <style> /*body 增加 overflow:hidden*/ body{ overflow:hidden; } </style>
这里要说一下浏览器的滚动条,如果觉得不美观可以再css进行屏蔽隐藏。
关注宁波网站建设博客,更多精彩分享,敬请期待!
Tags:fullpage.js wow.js
很赞哦! ()