案例scrollMonitor.js加載特效讓文章列表動感起來www.newsky365.com

再怎麼死板的主題，模板，jQuery均可以把它修飾爲炫彩華麗的網站成品，此次實例看看scrollMonitor.js如何把文章列表動感的實現載入特效。

如下是Wordpress的案例，其餘的開源程序也能夠同樣使用……

scrollMonitor.js這個腳本原理主要是用來監聽瀏覽器窗口，而後經過DOM操做來實現載入特效。

首先引入腳本文件，你能夠直接引用我服務器上的腳本，也能夠下載到本身的服務器上調用，推薦在footer.php中加載http://www.newsky365.com/wpscrollmonitor/

而後是JS調用代碼 (這裏注意了，excerpt 爲列表頁指定的class)

jQuery(document).ready(function(a) {
if (typeof scrollMonitor != 'undefined')
{
a(".home .excerpt").each(function(i, el)
{
var ael = a(el),
watcher = scrollMonitor.create(el, -100);
ael.addClass('bigfa-left-hide');
watcher.enterViewport(function(ev)
{
if (!ael.hasClass('bigfa-left-show'))
{
ael.addClass('bigfa-left-show');
}
});
});
}
})

最後一步須要添加樣式調用 兩個特效，你能夠本身選擇

.bigfa-left-hide {
opacity: 0;
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition: all ease-in-out 0.3s;
-moz-transition: all ease-in-out 0.3s;
transition: all ease-in-out 0.3s;
-webkit-perspective-origin: top center;
-moz-perspective-origin: top center;
perspective-origin: top center;
}
.bigfa-left-show {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
}

左側彈入效果

.bigfa-left-hide{transform:translateX(-2000px);-moz-transform:translateX(-2000px);-webkit-transform:translateX(-2000px);-webkit-transition: all ease-in-out 0.6s;-moz-transition: all ease-in-out 0.6s;transition: all ease-in-out 0.6s;}
.bigfa-left-show{transform:translateX(0);-moz-transform:translateX(0);-webkit-transform:translateX(0);}

此時就大功告成了ctrl+f5 試試效果吧

js 下載地址：http://www.newsky365.com/wpscrollmonitor/