潜浮洋流

网页幻灯片，现在比较流行的说。我自己也做过几个，从纯 js 控制到用各种 css3 库。纯 js 操纵元素的效果实在惨不忍睹，尤其是在安卓手机上，各种卡顿，看完简直想把手机扔马桶里冲掉。所以之后引入了 Swiper 和 Animate.css。

Swiper 用于翻页的效果，常用效果主要使用 translate3d 来实现移动区域切换画面。传说 transform 的值加上 3d 会开启硬件加速，所以理论上 translate3d 就比 translate 效果好，但是安卓机上差别也不是特别明显。使用方法详见文档，下面简述一下结构。

1.添加引用

<head>
  ....
  <link rel="stylesheet" href="path_to_css/idangerous.swiper.css">
  <script defer src="path_to_js/idangerous.swiper-2.x.min.js"></script>
  ....
</head>

2.html代码

<div class="swiper-container">
  <div class="swiper-wrapper">
    <!--第一页-->
    <div class="swiper-slide"> 
      <!-- 添加的 html -->
    </div>

    <!--第二页-->
    <div class="swiper-slide">
      <!-- 添加的 html -->
    </div>

    <!--第三页-->
    <div class="swiper-slide"> 
      <!-- 添加的 html -->
    </div>
    <!--等等..-->
  </div>
  
  <!--分页标-->
  <div class="pagination"></div>
</div>

3.css代码

<style>
  /* 设定每页的样式 */
  .swiper-container, .swiper-slide {
    width: 500px;
    height: 200px;
  }
  /* 设置分页样式 */
  .pagination {
    position: absolute;
    z-index: 20;
    left: 10px;
    bottom: 10px;
  }
  /* 设置分页节点样式 */
  .swiper-pagination-switch {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 4px;
    background: #555;
    margin-right: 3px;
    opacity: 0.8;
    border: 1px solid #fff;
    cursor: pointer;
  }
  /* 等等 */
</style>

4.js代码

<script>
  var mySwiper = $('.swiper-container').swiper({
    mode:'horizontal', //水平模式
    pagination: '.pagination', //设置分页
    paginationClickable: true, //分页节点可点
    loop: false, //是否循环
    onSlideChangeEnd: function() {
      //滑动结束，根据 mySwiper.activeIndex 在这一页做些什么
      
      //添加这个css类可以使该页锁住
      $(mySwiper.activeSlide()).toggleClass('swiper-no-swiping');
    }
  });
</script>

如果觉得翻页的切换效果不够 cool 那么请移步这里。使用了这个插件后可以自定义切换效果，尽情创作吧。

Animate.css 用于局部动画，各种飞来飞去的效果都是有的，基本就是使用 css3 来实现的。查看文档的话在这，对比 jQuery 或 zepto 的 animate 函数效果还是流畅不少。animate 比较吃内存，所以尽量只在可视范围内做些动画，不在可视范围内的能停掉就停掉吧，不然。。。

下面说明一下使用方法

<script>
  $('#yourElement').addClass('animated bounceOutLeft'); //添加动画
  $('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething); //动画结束就 doSomething
</script>
<style>
  /* 可以根据自己要求设定参数  */
  #yourElement {
    -vendor-animation-duration: 3s;
    -vendor-animation-delay: 2s;
    -vendor-animation-iteration-count: infinite;
  }
</style>

如果要在其基础上添加自己动画的话见如下示例

<style>
@-webkit-keyframes rotateHalf {
  0% {
    -webkit-transform: rotate3d(0,0,1,0deg);
    transform: rotate3d(0,0,1,0deg);
  }
  100% {
    -webkit-transform: rotate3d(0,0,1,180deg);
    transform: rotate3d(0,0,1,180deg);
  }
}
@keyframes rotateHalf {
  0% {
    -webkit-transform: rotate3d(0,0,1,0deg);
    transform: rotate3d(0,0,1,0deg);
  }
  100% {
    -webkit-transform: rotate3d(0,0,1,180deg);
    transform: rotate3d(0,0,1,180deg);
  }
}
.rotateHalf {
  -webkit-animation-name: rotateHalf;
  animation-name: rotateHalf;
}
</style>
<script>
  $('#yourElement').addClass('animated rotateHalf');
</script>

差点忘了 zepto，它是一个类似 jQuery 的 js 库，不过比 jQuery 更轻量体积更小，主要适用于移动浏览器端。用法基本跟 jQuery 基本一致。在 4G 还没大行其道的时候，还是考虑下可怜的网速吧。

然后再贴两个动画库：animatable 和 paperjs

2015.01.03 南京