【巩固】bootstrap笔记二

这段主要记录如何给排版完的页面加一些动画效果，用到了的插件有：

• wow.min.js
• jquery.singlePageNav.min.js
• animate.css

---

• 将导航条上对应的菜单和页面上对应的区域用jquery.singlePageNav.min.js联系起来，让导航跳转有平滑过渡的效果。
  
  选择器为带有各类名称的ul组合

<div class="navbar-collapse collapse">
	<ul class="nav navbar-nav navbar-right"> <!--将这个ul元素作为singlePageNav()的使用对象-->
		<li><a href="#home">首页</a></li>
        <li><a href="#bbs">论坛</a></li>
        <li><a href="#html5">前端开发</a></li>
        <li><a href="#course">最新课程</a></li>
        <li><a href="#app">移动APP</a></li>
        <li><a href="#contact">联系我们</a></li>
	</ul>
</div>

singlePageNav();参数中可以传入一个对象，其中offset值为动画过渡后向下偏移的量

$('.navbar .nav').singlePageNav({
    offset:70
});

• bootstrap.js这个文件中包含了一个bootstrap用的collapse函数，传入show或者hide参数可以让元素有下拉效果

$('.navbar-collapse').collapse("show");
$('.navbar-collapse').collapse("hide");

• 给每个区块添加移入后的动画效果，用到animate.css和wow.js
  1. 首先创建WOW()对象new WOW().init();
  2. 给需要添加的区块的class加上wow以及animate.css中的动画形式
  3. 下面给每一块添加动画，在加好wow的class之后，再加入以下属性
  • data-wow-duration动画持续时间data-wow-duration="2s"
  • data-wow-delay动画延迟多少时间执行 data-wow-delay="5s"
  • data-wow-offset偏移量data-wow-offset="10"距离可视区域多远开始执行动画
  • data-wow-iteration重复次数data-wow-iteration="10"