个效果非常简单,之前还看到有的wp站用到了动态背景,看起来很炫酷,但是感觉很耗性能,今天正巧找到了一个极其简单的背景视差效果,完全可以用在wp上。只需要一段视差js代码以及一张背景图片即可。
首先是js,可以丢在footer.php,作用是针对body进行背景图片控制,其中的参数“20”是控制图片滚动的速度,数值越大滚动越慢,觉得眼花就调慢点吧:

<script>
window.onload=function(){
document.body.style.backgroundAttachment="fixed";
window.onscroll=function () {
document.body.style.backgroundPosition = "0px " + (0 + (Math.max(document.documentElement.scrollTop, document.body.scrollTop) / 20)) + "px";
}
}
</script>

其次是CSS,这个也是针对body的(一般背景都是在body上使用background: url('');属性显示背景图片:

body {
background: url('这里填写背景图片地址');
}
/*下面放你的页面主体的各种css,这里放的是演示页面的文章css*/
.container {
width: 70%;
margin: auto;
opacity:.6;
}
h1, h2, p {
border-radius:5px;
padding: 15px;
background-color: #eee;
color:#111;
}
h2 {
margin:10px 0;
}

最后是演示页面,试着滚动页面看看吧……