JS或JQ视差滚动怎样做?

JavaScript022

JS或JQ视差滚动怎样做?,第1张

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