您现在的位置是:首页 > 技术交流技术交流
fullpage.js和wow兼容问题
2023-02-19【技术交流】3085 人已围观
简介 因为项目是全屏竖向滚动网站,就用到了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
很赞哦! ()
相关文章
随机图文
查看thinkphp版本
学习框架的好办法是参考现成的网站,那么学习thinkphp框架第一步就是需要查找自己需要的版本号的程序。方法一:在thinkphp文件夹...双击编辑异步更新[Jquery收藏]
现在有看到cms编辑后台部分信息时可以直接双击后修改,功能蛮华丽 以下jquery代码可以实现。 收藏 $(function(){ ...linux显示当前版本
有时接手维护一下linux服务器,我们第一步需要确定当前版本,以下命令可以尝试 先以root登陆1、# uname -a (Linux查看...建站小插件推荐:图片放大缩小zoomerang.js
Zoomerang.js是一款非常实用的HTML DOM元素放大缩小js特效插件。它可以将页面上的任何元素进行放大缩小。当某个元素处于Zoo...