前提：
介於現在很多活動都使用了 類似全屏滾動效果 尤其在微信里面 我自己開發了一個快速構建 此類項目的控件 與市面上大部分控件不同的是此控件還支持元素的動畫效果 並提供多種元素效果 基於zepto.js
功能清單:
1 快速實現頁面全屏滾動效果。並提供多種翻頁效果，兼容大部分ios和android系統。
2 支持在頁面中添加多種動畫元素效果 來實現淡入，滑入等效果。
3 支持配置音樂功能。
4 支持搖一搖接口功能。
組件核心代碼原理：
1 頁面滾動
在移動頁面上如果想使用滾動，如過沒有任何動畫效果，那么肯定大家首先想到的就是用滾動條來滾動，但這樣的滾動比較單調，實現動畫效果比較困難，於是就想出了利用css3和div的絕對定位來實現。
<body> <div class="item item1"> </div> <div class="item item2"> </div> <div class="item item3"> </div> </body>
然后給每個div設置絕對定位樣式
.item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-position: center;
}
這樣頁面上的每個div都相當於一個頁面 只不過重疊了而已，接下來就要利用javascript和css讓這些頁面可以滾動(利用touch時間改變div的transform來實現滾動)
function touchStart(event) { if (dragStart !== null) return; if (event.touches) { event = event.touches[0]; } //抓取時的所在位置 dragStart = event.clientY; } function touchMove (event) { if (dragStart === null) return; if (event.touches) { event = event.touches[0]; } //得到抓取開始時於進行中的差值的百分比 percentage = (dragStart - event.clientY) / window.screen.height;//和屏幕高度做比較 if (percentage > 0) { // //向上拖動 var translateY = 1 - 0.4*percentage;//位置系數，可以微調 $(event.target).next().css('-webkit-transform', 'translateY('+translateY*100+'%)'); //下一個item上移動 } else { //向下拖動 var translateY = -(0.4*percentage); $(event.target).css('-webkit-transform', 'translateY('+translateY*100+'%)');//當前item下移動 } } function touchEnd (event) { dragStart = null;//標志位值空 //抓取停止后，根據臨界值做相應判斷 if (percentage >= dragThreshold) {//向下滾動 $(event.target).css('-webkit-transform', 'translateY(-100%)'); $(event.target).next().css('-webkit-transform', 'translateY(0)'); } else if ( Math.abs(percentage) >= dragThreshold ) {//向上滾動 $(event.target).css('-webkit-transform', 'translateY(100%)'); } else {//沒有達到臨界值 恢復原樣 $(event.target).next().css('-webkit-transform', 'translateY(100%)'); } //重置percentage percentage = 0; }
這里有幾點說明一下：
1)使用translate3d來替換translateY可以開啟硬件加速 在渲染上會好一些。
2)在執行下一頁或者上一頁時 可以給div添加css3動畫來使其滾動帶有一定的動畫效果，組件提供8中翻頁效果。
2 元素的淡入淡出：
元素入場的動畫效果主要是利用css3來實現
.fadeIn { animation-name: fadeIn; -webkit-animation-name: fadeIn; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; } @keyframes fadeIn { 0% { transform: scale(0); opacity: 0.0; } 60% { transform: scale(1.1); } 80% { transform: scale(0.9); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @-webkit-keyframes fadeIn { 0% { -webkit-transform: scale(0); opacity: 0.0; } 60% { -webkit-transform: scale(1.1); } 80% { -webkit-transform: scale(0.9); opacity: 1; } 100% { -webkit-transform: scale(1); opacity: 1; } }
.fadeIn { animation-name: fadeIn; -webkit-animation-name: fadeIn; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; } @keyframes fadeIn { 0% { transform: scale(0); opacity: 0.0; } 60% { transform: scale(1.1); } 80% { transform: scale(0.9); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @-webkit-keyframes fadeIn { 0% { -webkit-transform: scale(0); opacity: 0.0; } 60% { -webkit-transform: scale(1.1); } 80% { -webkit-transform: scale(0.9); opacity: 1; } 100% { -webkit-transform: scale(1); opacity: 1; } }
該元素首先是隱藏的，在頁面滑入視窗時將其顯示，就會應用上css3設定的動畫效果，延伸出來不僅fadeIn效果，許多效果都可以設定,另外可以給元素添加data-delay屬性來控制元素的執行順序。
組件使用方法：
組件使用方法： { 'type' : 1,//翻頁的動畫效果 共有8種可以使用 'pageShow' : function(page){}, 'pageHide' : function(page){}, 'useShakeDevice' : {//是否使用手機搖一搖接口 'speed' : 30, 'callback' : function(page){} }, 'useParallax' : true,//是否使用parallax效果可參看demo第六頁 'useArrow' : true,//是否使用箭頭 'useAnimation' : true,//是否使用元素動畫效果 'useMusic' : {//是否使用音樂 'autoPlay' : true, 'loopPlay' : true, 'src' : 'http://mat1.gtimg.com/news/2015/love/FadeAway.mp3' } };
原文地址：https://github.com/lvming6816077/H5FullscreenPage