02-iScroll

iScroll

• iScroll是一个高性能,资源占用少,无依赖,多平台的JavaScript滚动插件
• iScroll不仅仅是滚动,在你的项目中包含仅仅4kb大小的iScorll,能让你的项目便拥有滚动,缩放,平移,无限滚动,视差滚动,旋转功能
• iScroll基本使用
  • 按照iScroll的规定搭建HTML结构
  • 引入iScroll
  • 创建iScroll对象,告诉它谁需要滚动

Swiper

• Swiper是纯JavaScript打造的滑动特效插件,面向PC,平板电脑等移动终端
• Swiper能实现触屏焦点图,触屏tab切换等常用效果
• Swiper基本使用
  • 引入swiper对应的css和js文件
  • 按照框架的需求搭建三层结构
  • 创建一个swiper对象

其他插件

• AnimateCSS
  • 其实swiper-animate就是参考Animate.css演变出来的一个插件
  • Animate.css和swiper-animate一样都是用于快速添加动画的
  • Animate.css的使用
    • 引入animate.css文件
    • 给需要执行动画的元素添加类名
    • animated这个类名是animate.css的基类,但凡需要通过animated.css来添加动画,都需要添加这个基类
• WOWJS
  • WOW.js是对animate.css的扩充,让页面滚动更有趣,通过WOW.js,可以在页面滚动的过程中逐渐释放动画效果
  • 简单点理解:(wow.js+animate.css)约等于(swiper.js+swiper.animate.css)
  • wow.js使用
    • 引入animate.css
    • 引入wow.js
    • 给需要执行动画的元素添加类名
    • 在JavaScript中初始化wow.js
• scrollReveal
  • scrollReveal是一个兼容PC端和移动设备的滚动动画库
  • WOW.js的动画只播放一次,而scrollReveal的动画可以播放一次或无限次
  • scrollReveal特点
    • 同时兼容PC端和移动端
    • 0依赖(不依赖于jQuery,也不依赖于animate.css)
    • 定制性高,使用简单方便快捷
  • scrollReveal事件
    • beforeReveal 动画开始之前的回调
    • afterReveal 动画结束时的回调
    • beforeReset 动画开始被重置的回调
    • afterReset 动画重置结束的回调