jq视差滚动插件

核心原理：元素和背景以不同的速度移动,以实现视差滚动效果
主要通过background-attachment=fixed属性实现
官网：http://markdalgleish.com/projects/stellar.js
直接下载
使用：
1.

<script type="text/javascript" src='../jquery-1.12.4.min.js'></script>
<script type="text/javascript" src='../lib/jquery.stellar.min.js'></script>

$.stellar({
				horizontalScrolling:false,//设置纵向滚动
				responsive:true
			})

常用参数

参数	说明
horizontalScrolling	设置垂直/水平滚动 true表示水平滚动，false垂直滚动
responsive	是否在屏幕尺寸发生改变时刷新页面 默认false

结构参数

参数	说明
data-stellar-background-ratio	设置背景滚动的速度(如取值为0.3则为正常滚动速度的0.3倍)
data-stellar-ratio	设置元素的滚动速度 值越大滚动速度越快

//css
.bg1{
			width:1200px;
			background: url('../../../Html5+css3/image/6.jpg') no-repeat fixed;
			background-size: 100% 100%;
		}
		.bg2{
			width:1200px;
			background: url('../../../Html5+css3/image/7.jpg') no-repeat fixed;
			background-size: 100% 100%;
		}
		.bg3{
			width:1200px;
			background: url('../../../Html5+css3/image/8.jpg') no-repeat fixed;
			background-size: 100% 100%;
		}
		p{
			font-size: 200px;
			color:white;
			text-align: center;
		}

//结构
<div class='bg1' data-stellar-background-ratio='0.03'>
        <p>TEST</p>
</div>
<div class='bg2' data-stellar-background-ratio='0.03'>
	<p>TEST1</p>
</div>
    
<div class='bg3' data-stellar-background-ratio='0.03'>
	<P>TEST2</P>
</div>
<script type="text/javascript" src='../jquery-1.12.4.min.js'></script>
<script type="text/javascript" src='../lib/jquery.stellar.min.js'></script>
	<script type="text/javascript">
		$(function(){
			$('div').height($(window).height());
			$.stellar({
				horizontalScrolling:false,//设置纵向滚动
				responsive:true
			})
		})
	</script>