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 动画重置结束的回调

你可能感兴趣的:(02-iScroll)