零基础建站培训教程介绍

当前位置:

导航平滑滚动与动画载入制作方法

1、导航的固定:.navbar-fixed-top
2、导航的锚链接:在链接地址上写上区块的ID名

3、导航的平滑滚动

单页面导航插件下载:jquery.singlePageNav.min


$(function(){
/*导航跳转效果插件*/
$('.nav').singlePageNav({ });
})

offset:向上偏移量

4、手机导航的自动收缩


/*小屏幕导航点击关闭菜单*/
$('.navbar-collapse a').click(function(){
$('.navbar-collapse').collapse('hide');
});

5、载入动画功能

第一步:引入动画插件必需的二个文件:wow.min.jsanimate.css

第二步:加载javascript方法:new WOW().init();

第三步:使用对象添加 class="wow animate名"  这样的类

第四步:选择自己需要的动画效果。地址:http://daneden.github.io/animate.css/

可用属性:

        data-wow-duration(动画持续时间)data-wow-duration="2s"
data-wow-delay(动画延迟时间)        data-wow-delay="5s"
data-wow-offset(偏移量)data-wow-offset="10" 距离可视区域多远开始执行动画
data-wow-iteration="10"(重复次数)  data-wow-iteration="10"

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关教程

  1. 如何在公司局域网里建网站 怎么建立局域网网站
  2. 如何屏蔽网站中的谷歌字体
  3. 网站服务器的等级区分
  4. 企业域名邮箱配置方法
  5. win7/win8/win10怎么看电脑是32位还是64位
  6. 企业网站怎么做?个人可以做企业网站吗
  7. php如何通过地址栏URL来传递/获取参数(适用WP,DEDE,DZ)
  8. Dreamweaver 如何添加网页图片热区链接
  9. 网站好用的js框架有哪些,优缺点是什么
  10. 电脑怎么换IP,5种如何换IP的方法
学做网站论坛零基础学建网站课程