【某元素每次進入視窗時均有動畫效果】小米官網(wǎng)商品詳細頁的元素動畫效果的實現(xiàn)方式
如題,小米官網(wǎng)的商品詳細頁中,一些圖片在每次進入瀏覽器視窗范圍時,都會有位移+顯現(xiàn)的動畫效果.
大約為:top|bottom|left|right屬性與opacity屬性的變化.
如果只是首次顯示元素時顯示動畫,那么實現(xiàn)起來就簡單的多了.如下代碼:
1
1111
但是,單純用CSS3實現(xiàn)出來的效果,只有在元素第一次加載時展示動畫,沒有進視窗范圍的局限,更無法每次進入視窗均有動畫的效果
于是乎,找到了第三方插件ScrollReveal.js
這是可以讓元素的動畫直到進入視窗范圍之時才開始動畫效果,并且可以設置每次進入時均重新動畫.
百度源碼和API:
1開始
1.1基本
導入js
s cript>
reveal()方法是主要的API,通過該方法創(chuàng)建和管理CSS動畫
1111h1>
2222h3>
window.sr=ScrollReveal();
sr.reveal("h1");
sr.reveal("h3");
1.2連點式
1111h1>
2222h3>
window.sr=ScrollReveal().reveal("h1,h3")
2配置
2.1基本
通過配置ScrollReveal()對象創(chuàng)建基本屬性,再通過reveal()方法增改特例屬性
window.sr=ScrollReveal({reset:true});//是否重復動畫
sr.reveal("h1",{origin:'top'});//動畫進入方向
sr.reveal("h3",{delay:500});//動畫延遲
2.2參數(shù)說明
2.2.1 origin
默認值:'bottom'
元素進入方向,取值范圍:['top','bottom','left','right']
若不想讓元素位移,可將distance的值設為0
2.2.2 distance
默認值:'20px'
元素進入位移距離,支持所有css長度
['20px','5rem','10%','20vw'...]
2.2.3 duration
默認值:500
元素動畫時長,單位毫秒
2.2.4 delay
默認值:0
元素動畫延遲,單位毫秒
2.2.5 rotate
默認值:{x:0,y:0,z:0}
元素動畫前的角度,動畫將移動至0
具體參考CSS3:rotateX(),rotateY() rotateZ()
2.2.6 opacity
默認值:0
元素動畫前的透明度,動畫將變化至1
2.2.7 scale
默認值:1
元素動畫前的大小,動畫將變化值1
2.2.8 easing
默認值:'cubic-bezier(0.6,0.2,0.1,1)'(貝塞爾曲線什么鬼)
動畫播放速度
可選值:ease,ease-in-out,linear等
2.2.9 container
默認值:window.document.documentElement
對Dom元素的封裝方式
2.2.10 mobile
默認值:true
值:true|false
控制動畫移動(未測試出效果)
2.2.11 reset
默認值:false
值:true|false
再次顯示元素時是否重新動畫
true:每次元素出現(xiàn)在視窗范圍內時再次播放動畫
false:只有第一次元素出現(xiàn)在視窗范圍內時才播放動畫
2.2.12 useDelay
默認值:'always'
值:'always'|'once'|'onload'
當reset:true時使用
always:每次動畫都有延遲時間
once:只有第一次有延遲時間,當元素第二次出現(xiàn)在視窗時無延遲立即開始動畫
onload:加載時有延遲時間
2.2.13 viewFactor
2.2.14 viewOffset
2.2.15 beforeReveal
默認值:function(ele){}
元素移入視窗,css渲染之前觸發(fā)
2.2.16 beforeReset
默認值:function(ele){}
元素移除視窗,css渲染消失時觸發(fā)
2.2.17 afterReveal
默認值:function(ele){}
css渲染完成后
2.2.18 afterReset
默認值:function(ele){}
元素退出時css渲染后
3高級
3.1序列動畫
33333h3>li>
33333h3>li>
33333h3>li>
ul>
window.sr=ScrollReveal().reveal('.box',{ duration:500},100);
reveal()方法可以帶一個整形參數(shù)Num,使一個元素集合的每一個元素延遲上一個元素Num毫秒播放動畫
3.2重寫配置
window.sr=ScrollReveal({
scale:1
});
sr.reveal('h1',{
scale:2
});
扣扣：120/342/833驗證:QQ
~??Y?=
a
