stellar视差插件
视差滚动指网页滚动过程中，多层次的元素进行不同程度的移动，视觉上形成立体运动效果的网页展示技术。主要核心就是前景和背景以不同速度移动，从而创造出3D效果。利用background-attachment属性实现。stellar.js是一个jQuery插件，能很容易地给网站添加视差滚动效果。以下介绍stellar的简单使用：
1.引入js包
<script src="path/to/jquery/jquery.min.js"></script>
<script src="path/to/jquery.stellar.min.js"></script>2.引用HTML和css样式
<div class="content" id="content1">
<p>TEXT HERE</p>
</div>
<div class="content" id="content2">
<p>TEXT HERE</p>
</div>
<div class="content" id="content3" data-stellar-background-ratio="0.5">
<p>TEXT HERE</p>
</div>
<div class="content" id="content4" data-stellar-background-ratio="0.5">
<p>TEXT HERE</p>
</div>
<div class="content" id="content5" data-stellar-background-ratio="0.5">
<p>TEXT HERE</p>
</div>
<div class="content" id="content6" data-stellar-background-ratio="0.5">
<p>TEXT HERE</p>
</div>
//css样式中设置content背景等3.js 调用函数
$.stellar({
horizontalScrolling: false,
responsive: true
});4.详细参数
| 名称 | 说明 |
|---|---|
| horizontalScrolling 和 verticalScrolling | 该配置项用来设置视差效果的方向。horizontalScrolling设置水平方向，verticalScro设置垂直方向， 为布尔值，默认为true |
| responsive | 该配置项用来制定load或者resize时间触发时是否刷新页面，其值为布尔值，默认为false |
| hideDistantElements | 该配置项用来设置移出视线的元素是否隐藏，其值为布尔值，若不想隐藏则设置为false` |
| data-stellar-ratio=”2” | 定义了此元素针对页面滚动的速度比率，比如，0.5为页面滚动的50%，2为页面滚动的200%，所以数值越大，你可以看到页面元素滚动速度越快。 |
| data-stellar-background-ratio | 该配置项用在单个元素中，其值为一个正数，用来改变被设置元素的影响速度。 例如 值为0.3时，则表示背景的滚动速度为正常滚动速度的0.3倍。如果值为小数时最好在样式表中设置 |
5.实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,body{
height: 100%;
}
.content{
width: 100%;
height: 100%;
}
.content2{
background: url(images/2.jpg) 0 0/100% 100% no-repeat;
/*背景图像相对于窗体固定*/
background-attachment: fixed;
}
.content4{
background: url(images/4.jpg) 0 0/100% 100% no-repeat;
background-attachment: fixed;
}
/*.yezi{
position: fixed;
top: 50px;
right: 10px;
}*/
</style>
</head>
<body>
<!-- data-stellar-ratio 元素针对页面滚动的速度比率 -->
<!-- <img src="images/big-01.png" alt="" class="yezi" data-stellar-ratio="2"> -->
<div class="content content1">111</div>
<!-- data-stellar-background-ratio 设置元素背景的滚动速率 -->
<div class="content content2" data-stellar-background-ratio="5"></div>
<div class="content content3">333</div>
<div class="content content4" data-stellar-background-ratio="0.5"></div>
<script type="text/javascript" src="jquery.min.js"></script>
<!-- 引入视差滚动插件stellar -->
<script type="text/javascript" src="jquery.stellar.min.js"></script>
<script type="text/javascript">
$(function(){
$.stellar({
// 设置视差效果方向
horizontalScrolling:false,
// load或者resize事件触发时是否刷新页面
responsive:true
})
})
</script>
</body>
</html>官网 http://markdalgleish.com/projects/stellar.js/
代码及相关文件详见GitHub主页 视差滚动效果-stellar插件