您现在的位置是:首页 > 技术交流技术交流

fullpage.js和wow兼容问题

2023-02-19【技术交流】785 人已围观

简介 因为项目是全屏竖向滚动网站,就用到了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  

很赞哦! ()

文章评论

点击排行

本站推荐

站点信息