這種前端動(dòng)效交互感很強(qiáng)啊，以前使用原生的鼠標(biāo)滾輪監(jiān)聽(tīng)寫過(guò)類似的功能。還要加防抖函數(shù)，麻煩的很。這段時(shí)間參考了套用的一個(gè)網(wǎng)頁(yè)模板，找到了最簡(jiǎn)單實(shí)現(xiàn)這個(gè)功能的辦法。
————CafuChino
需要用到的庫(kù)：
- Animate.css：https://daneden.github.io/animate.css/(提供寫好的動(dòng)效)
- waypoint：https://github.com/imakewebthings/waypoints(設(shè)置監(jiān)聽(tīng)點(diǎn))
在之前這樣的應(yīng)用中，因?yàn)椴恢廊绾巫粉欗?yè)面滾動(dòng)進(jìn)度，所以設(shè)計(jì)成了像幻燈片切換的效果，使用的方法是原生監(jiān)聽(tīng)鼠標(biāo)滾輪，添加節(jié)流函數(shù)操作改變一個(gè)計(jì)數(shù)變量，這個(gè)計(jì)數(shù)變量的值為當(dāng)前頁(yè)。至于動(dòng)效的實(shí)現(xiàn)是在翻頁(yè)的同時(shí)加上一個(gè)綁定動(dòng)畫的類，一段時(shí)間之后再刪除這個(gè)類?？偠灾浅７爆?，一個(gè)簡(jiǎn)單的頁(yè)面寫了百余行的js專門用來(lái)操作動(dòng)效。現(xiàn)在找到了比較簡(jiǎn)單的辦法，不過(guò)思路在一些方面上依然一樣。
waypoint庫(kù)：
waypoint庫(kù)是一個(gè)可以監(jiān)聽(tīng)頁(yè)面滾動(dòng)位置的庫(kù)，他監(jiān)聽(tīng)的方式是監(jiān)聽(tīng)某一個(gè)元素與屏幕定的距離。當(dāng)設(shè)定元素與屏幕距離小于等于所設(shè)定的百分比，就會(huì)觸發(fā)事件。而且還可以設(shè)定觸發(fā)時(shí)的頁(yè)面滾動(dòng)方向，這就形成了向下滾動(dòng)界面，屏幕上的元素淡入（可以使任何動(dòng)效或者是任何事件）。插件的使用很簡(jiǎn)單，文檔已經(jīng)很完整了，所以我只記錄一下我摸索的方案：
把包裹需要綁定動(dòng)效的父容器設(shè)定class 為animate-box ,需要綁定動(dòng)效的元素設(shè)定class為to-animate，開(kāi)始動(dòng)效添加class為animated，這樣不僅比較容易判定元素的狀態(tài)，而且可以允許父元素內(nèi)有綁定動(dòng)效的元素，也有不綁定的元素。
//css部分
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}//animate.css中有定義，可以寫在頁(yè)面css中方便修改
.to-animate {
opacity: 0;
}
可以看出，未執(zhí)行動(dòng)效的元素依然存在，只是被調(diào)整成了完全透明。如果將其設(shè)為hidden，將會(huì)導(dǎo)致布局閃爍。
//js部分,使用了jq
$('.animate-box').waypoint(function (direction) {
if (direction === 'down' && !$(this).hasClass('animated')) {
$(this.element).children('.to-animate').addClass('fadeInUp animated');
}
}, {
offset: 75%
});
offset指的是當(dāng)元素與頂部距離的觸發(fā)值，direction代表的是達(dá)到觸發(fā)值的時(shí)候的方向。有一點(diǎn)非常重要：
這里的this指代的是監(jiān)聽(tīng)點(diǎn)本身，如果直接使用this，將會(huì)獲取不到其子元素，而this.element表示的才是綁定監(jiān)聽(tīng)的元素，一定注意！
之后頁(yè)面上的元素就會(huì)在第一次滾動(dòng)到那里的時(shí)候漸隱顯示了，animate.css中定義了很多種的動(dòng)效類型（代碼里的fadeInUp就是其中定義的），想要使用哪種動(dòng)效，直接添加指定的類就可以了，非常方便√當(dāng)然waypoint也可以不止綁定動(dòng)效，可以綁定請(qǐng)求，達(dá)到用戶統(tǒng)計(jì)的作用等等；通過(guò)對(duì)用戶瀏覽情況統(tǒng)計(jì)分析用戶意向等。
