Swiper.js
一些需要我們手動設置的參數
排版元素需要設置position:absolute絕對元素定位
swiperAnimate方法的使用
動畫播放完成之后的監聽
上滑提示
屏幕適配的問題
Animate.css
stylie
velocity.js
總結
前言
現在已經有許多公司開發了各種在線H5制作工具平台，可以快速制作簡單的移動端H5頁面，主要還是展示營銷，我隨便百度了一個，效果看起來如下所示：
瞬間高大上的感覺有沒有，但是這類的的工具一般交互都比較簡單，大多都只是基本的滑動特效，好處就是可以快速的將設計稿轉化，雖然也需要切圖上傳排版，但總比代碼手動調整的好，而且全程可視化操作，缺點是很難做到深度互動，而源碼基本都是加密的，導出使用還挺麻煩，所以要嘛付費高級版，要嘛定制，這樣溝通和制作成本都會變高，考慮到公司內部以后會經常用到一些H5，索性自己研究一番，后面可以考慮弄成通用模板。
查了許多資料，目前絕大多數H5都是基於swiper.js！！！
Swiper.js
官方地址：https://github.com/nolimits4web/Swiper
國內地址：http://www.swiper.com.cn/
當然swiper不僅僅可以用戶移動網站，目前很多PC端企業官網動態效果也都可以基於此插件實現，類似的還有FullPage.js
官網網站里面已經有很詳細的教程了，參考示例使用即可，下面我主要講一些開發過程中遇到的坑。
一些需要我們手動設置的參數
1、swiper-container的width和height
一開始用的時候會發現代碼按照教程設置好了，但是滑動的時候怎么會漂移，而且樣式怪怪的。
這個時候需要我們主動設置width和height
.swiper-container { width: 100%; height: 100%; left: 0%; top: 0%; margin: 0; border-radius: 0px; position: relative; /*background-color: rgba(0, 0, 0, 0.5);*/ }
2、direction: 'vertical'
默認情況是橫向滑動的，而我們手機一般是豎着滑動的
排版元素需要設置position:absolute絕對元素定位
默認swiper的css中.swiper-slide樣式已經設置成了position:relative，每個頁面的元素當然是需要以父級為基准顯示，所以每個頁內元素都要設置成position:absolute，這樣就可以通過絕對定位來按照設計稿排版了。
在CSS中關於定位的內容是：
static(靜態) 沒有特別的設定，遵循基本的定位規定，不能通過z-index進行層次分級。
relative(相對定位) 對象不可層疊、不脫離文檔流，參考自身靜態位置通過 top,bottom,left,right 定位，並且可以通過z-index進行層次分級。
absolute(絕對定位) 脫離文檔流，通過 top,bottom,left,right 定位。選取其最近一個最有定位設置的父級對象進行絕對定位，如果對象的父級沒有設置定位屬性，absolute元素將以body坐標原點進行定位，可以通過z-index進行層次分級。
fixed（固定定位） 這里所固定的參照對像是可視窗口而並非是body或是父級元素。可通過z-index進行層次分級。
swiperAnimate方法的使用
默認情況下，swiper是不會自動播放動畫的，當設置好動畫效果attribute之后
swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"
還需要調用swiperAnimate才會讀取執行，所以需要在onSlideChangeEnd事件里主動調用此函數。
或者你需要重新執行動畫效果，都可以調用此函數。
動畫播放完成之后的監聽
有時候我們需要連貫的動畫效果，比如，淡入之后，播放另外一個動畫，首要任務就是監聽動畫完成事件
代碼如下：
//one僅執行一次，on永久綁定$('.swiper-slide:eq(0) img').on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() { $(this).removeClass('animated fadeInUp bounceInRight'); $('.swiper-slide:eq(0) img').addClass('animated tada');});
其實類似的這樣連貫的動效可以不用代碼做什么監聽，我這么做的主要原因是，動畫效果直接用animate.css的即可，否則自己寫效果也很麻煩，好在已經有開源在線工具可以編輯動畫導出css了，見下文
上滑提示
默認情況只有pagination分頁器，就是下面的小圓圈，swiper還自帶了幾個樣式。
所以這個提示是需要我們自己敲代碼的，見demo，樣式如下
屏幕適配的問題
這是一個比較棘手的問題，根據我經驗來說，解決方案有3種，各有利弊，當然也可以混合使用。
1、百分比響應式
這是我經常采用的方案，可以實現動態自適應，讓瀏覽器自己計算，比較適合全都是圖片的情況。理論上只要高寬比正確，元素就不會跑偏或拉伸。
如果高寬比不一致，我會在js里計算好比例，先設置body的max-width和max-height，然后按比例通過高度計算設置body的height和width（因為一般都是屏幕過寬），除非有橫豎屏切換
2、rem
通過@media only screen and (max-width)來指定機型，自行計算設置相應的rem即可實現自適應，而且字體也可以根據rem值設置大小，理論上只要花夠時間做適配，可以100%適配所有機型。
3、transform
和viewport的原理一樣，而viewport進行縮放是對整個可視區的縮放，所以高寬比是不能變的。
而transform是針對內部每個元素，進行縮放，會根據原始比例自動拉伸高寬，其中還包括文字。
參考代碼如下（摘自swiper官方示例）：
scaleW=window.innerWidth/320;scaleH=window.innerHeight/480;var resizes = document.querySelectorAll('.resize'); for (var j=0; j<resizes.length; j++) { resizes[j].style.width=parseInt(resizes[j].style.width)*scaleW+'px'; resizes[j].style.height=parseInt(resizes[j].style.height)*scaleH+'px'; resizes[j].style.top=parseInt(resizes[j].style.top)*scaleH+'px'; resizes[j].style.left=parseInt(resizes[j].style.left)*scaleW+'px'; }var scales = document.querySelectorAll('.txt');for (var i=0; i<scales.length; i++) { ss=scales[i].style; ss.webkitTransform = ss.MsTransform = ss.msTransform = ss.MozTransform = ss.OTransform =ss.transform='translateX('+scales[i].offsetWidth*(scaleW-1)/2+'px) translateY('+scales[i].offsetHeight*(scaleH-1)/2+'px)scaleX('+scaleW+') scaleY('+scaleH+') ';}
Animate.css
官方地址：https://daneden.github.io/animate.css/
swiper的默認動畫就是用的Animate.css，里面的效果非常多，但僅僅是一些簡單的特效而已，那如何快速根據需求制作出自己的動畫效果呢？它就是stylie！
stylie
官方地址：http://jeremyckahn.github.io/stylie/
可視化的動畫編輯器，添加關鍵幀即可，但是這也僅僅是單一動畫的制作。
有時候為了達到更好的效果，確實需要在H5上播放動畫（視頻和gif都不考慮），用上面的工具+切圖+寫代碼要搞死前端開發！
好在已經有同學分享了經驗，參考《H5動畫開發快車道》
原理就是通過Animate CC導出html，然后我們再引用，這樣就可以由設計人員直接導出給前端接入即可，方便你我他。
velocity.js
官方地址：http://velocityjs.org/
有時候我們還有這樣的需求，動態計算設置動畫，stylie是預先生成好的，直接設置CSS工作量又非常的，jquery本身自帶animate方法，但是效率實在太低，手機上卡頓情況嚴重，velocity.js就派上用場了，當然，通也可以使用它通過簡單的代碼快速實現動畫特效。
velocity.js 是一個簡單易用、高性能、功能豐富的輕量級JS動畫庫。它能和 jQuery 完美協作，並和$.animate()有相同的 API， 但它不依賴 jQuery，可單獨使用。 Velocity 不僅包含了$.animate()的全部功能， 還擁有：顏色動畫、轉換動畫(transforms)、循環、 緩動、SVG 動畫、和 滾動動畫 等特色功能。
它比$.animate()更快更流暢，性能甚至高於 CSS3 animation， 是 jQuery 和 CSS3 transition 的最佳組合，它支持所有現代瀏覽器，最低可兼容到 IE8 和 Android 2.3。
原理簡單來說，就是velocity.js沒有使用到css的 transition，而是用requestAnimationFrame通過js代碼來控制動畫
總結
通過swiper.js再加上前面的代碼結合在一起，我們基本就實現了一個完整的H5展示頁面，包括素材加載，背景音樂播放，頁面滑動。到目前為止，其實我們大多數時間都在寫業務邏輯的代碼，輪子什么的早都已經有現成的了，真感謝開源的世界，人人為我，我為人人，極大促進了科技的進步吶，正所謂站在巨人的肩膀上，后面有空也許我會基於此框架寫一個本地的H5編輯器，也開源貢獻出來。
demo地址：
https://github.com/leestar54/h5-demo/blob/master/swiper.html