jquery.parallax-scroll是一款效果超炫的平滑垂直滚动视觉差jQuery特效。该视觉差特效使用requestAnimationFrame和CSS3 3D transitions在页面垂直滚动时制作非常平滑的过渡动画效果。
或者
Jarallax.js是一款用于制作网页背景视觉差效果的jQuery插件。Jarallax.js视觉差插件可以控制不同的元素的动画速度，从而形成视觉差效果。并且该视觉差特效还带有动画进度条，效果非常酷。
两个都在这里了 自行选择
水平垂直的原理是一样的，它这个主要是增加了鼠标滚轮事件，其他的没啥特别。
<!doctype html><html>
<head>
<meta charset="utf-8" />
<title>视差滚动</title>
<style>
*{margin: 0padding: 0}
body{ }
#bg{width: 100%background-image: url(trim.jpg)background-size: coverheight: 768pxposition: fixed}
#img1{position: fixedtop: 650pxborder: 1px solid #aaapadding: 4pxbackground-color: #fff}
#img2{position: fixedtop: -500pxright: 0pxwidth: 600pxheight: 300pxborder: 1px solid #aaapadding: 4pxbackground-color: #fff}
#txt1{top: 400px position: fixedfont-family: '黑体'font-size: 36pxcolor: #ffffont-weight: boldtext-shadow: 2px 2px 12px #fffleft: -400px}
</style>
<script src="jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="bg"></div>
<img id="img1" src="thumb.jpg">
<img id="img2" src="535032.jpg">
<div id="txt1">纳米尖兵巴德尔</div>
<div style="height:3000px"></div>
<script>
window.onscroll=function(){
var ht=document.documentElement.scrollTop || document.body.scrollTop
$("#bg").css({"background-position":'0px -'+ht/20+'px'})
$("#img1").css({"top":650-ht/2+'px'})
$("#img2").css({"top":-500+ht/2+'px'})
$("#txt1").css({"left":-300+ht/2+'px','opacity':500/ht})
}
</script>
</body>
</html>
怎么在angularjs里使用视差滚动插件首先我们要做的是在我们的项目中引入我们所需要的依赖，假设你已经在你的电脑上已经安装好了node与cnpm只需要利用控制台在你的项目目录下使用如下命令
1. cnpm install angular --save
2. cnpm install echarts --save
