nav滑动插件和animate.css插件的使用

最新推荐文章于 2020-02-25 15:11:46 发布

DanielZhou1

最新推荐文章于 2020-02-25 15:11:46 发布

阅读量312

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_42042250/article/details/96440873

版权

本文介绍如何使用jquery.singlePageNav.min.js实现平滑滚动效果，并通过animate.css添加页面元素动画。首先引入必要的文件，然后通过jQuery选择器指定导航元素，设置singlePageNav插件参数实现导航跳转。接着介绍animate.css的使用方法，包括wow.js初始化及动画属性设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 nav滑动插件 jquery.singlePageNav.min.js

① 先引入jquery, 在引入jquery.singlePageNav.min.js

② 使用方法如下：给导航增加 singlePageNav（）方法，里面可以设置偏移量，因为nav本身有高，会遮住一部分

  $(function () {
        /*导航跳转效果插件*/
        $('.nav').singlePageNav({
            offset:70
        });
        /*小屏幕导航点击关闭菜单*/
        $('.navbar-collapse a').click(function(){
            $('.navbar-collapse').collapse('hide');
        });
    })

2 animate.css插件的使用

① 需要引入 wow.min.js 和 animate.css

②

   $(function () {
        new WOW().init();
    })

③ 在需要设置动画的层加上 wow 和 animate 类名

④ 动画持续时间：data-wow-duration="1s" 动画延迟执行时间：data-wow-delay="1s"

偏移量：data-wow-offset="100" data-wow-iteration：动画执行次数