案例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/