前言原理
使用方式
結合swiper.js
視差滾動原理其實並不難，parallax.js的原始碼也僅有600行，大致講解一下
1、預設情況通過requestanimationframe方式做數值計算，否則用settimeout
2、優先通過deviceorientationevent判斷是否支援陀螺儀，否則通過mousemove事件監聽滑鼠移動if(!window
.requestanimationframe
),
timetocall);lasttime=currtime+timetocall
;
return
id;
};
}
3、css動畫優先採用transform的translate3d，否則使用translate進行平移plugin.prototype
.enable
=function
()else
window.addeventlistener('resize'
,this
.onwindowresize
);
this
.raf
=requestanimationframe
(this
.onanimationframe
);
}
};
if
(this
.transform3dsupport
)elseif(
this
.transform2dsupport
)
5、層運動的計算規則plugin.prototype
.accelerate
=function
($element
)
};
計算的公式如下：
例如在場景中乙個data-depth為0.5的層，它的scalarx和scalary值都為10(預設值)，它的父容器的尺寸為1000px x 1000px，那麼這個層在x和y方向的總運動量就為：xmotion=parentelement
.width *(
scalarx
/100)*
layerdepth
ymotion=parentelement.height *(
scalary
/100)*
layerdepth
非常簡單，官方建議使用ul+li標籤的無序列表（當然你用div或者其他標籤都行），你只需要給它們乙個class layer和乙個data-depth屬性來指定該層的深度。深度為0的層將是固定不動的，深度為1的層運動效果最激烈的層。0-1之間的層會根據值來相對移動。xmotion=1000*(
10/100)
*0.5=50
# 50px of positive and negative motion in x
ymotion=1000*(10/100)
*0.5=50
# 50px of positive and negative motion in y
ul.scene,
.scene
.layer
一般這樣使用就足夠了，除非是比較複雜的效果，要設定一些特定引數，呼叫api，具體內容參見官方文件$('. scene').parallax
();
varscene
=document
.getelementbyid
('scene'
);
varparallax
=new
parallax
(scene
);
使用方式上不變，只不過需要把需要視差的元素再包裹一層
最終效果圖：class="swiper-slide"
>
H5禁止頁面滑動 滾動
禁止頁面滾動 有三種方法 1，依靠css 將頁面 document.documentelement.style.overflow hidden document.body.style.overflow hidden 手機版設定這個。如果設定了如上，頁面的滾動條將會消失，此時滑鼠滾輪失效。但是 你用鍵...
h5學習筆記 gsap動效庫
今天正好趕上用這個庫的時候，之前使用as3，後面greensock已經公升級到3.0版本，發現更加簡化使用。進入官網可以看到裡面有一些教程使用，greensock 基本上和as3介面類似。js版本可以針對div做效果。gasp 尺寸還可以支援單位，px 和rem轉換，效果還十分不錯。也可以不帶單位。...
玩轉 H5 下拉上滑動效
按照上面的技術方案實施，具體過程為 禁用頁面頂部下拉事件 將頁面的主體內容用乙個div容器包含起來，同時複製需要放大處理的內容節點至主體內容之外 繫結頁面滑屏事件 計算滑屏偏移量以及縮放等數值的運算 根據變化數值主體內容transfrom下滑，同時複製的節點做放大動效處理 監聽滑屏事件結束，執行回彈...