什么是stellar.js

stellar.js是一款应用视差滚动技术的jQuery插件，能很容易地给网站添加视差滚动效果。视差滚动指网页滚动过程中，多层次的元素进行不同程度的移动，视觉上形成立体运动效果的网页展示技术。主要核心就是前景和背景以不同速度移动，从而创造出3D效果。利用background-attachment属性实现。

使用

1.  引入js包

<script src="path/to/jquery/jquery.min.js"></script>

<script src="path/to/jquery.stellar.min.js"></script>

2.  设置HTML和css样式

<style type="text/css">
body {
font-size: 100px;
color: white;
text-shadow: 0 1px 0 black, 0 0 5px black;
text-align: center;
line-height: 600px;
}

p {
padding: 0 0.5em;
margin: 0;
}

.content {
background-attachment: fixed;

}

#content1 {
background-image: url("img/1.jpg");
}

#content2 {
background-image: url("img/2.jpg");
}

#content3 {
background-image: url("img/3.jpg");
/* height: 100vh; */
}

#content4 {
background-image: url("img/4.jpg");
}
</style>

<div class="content" id="content1">
<p>DEMO PAGE </p>
</div>
<div class="content" id="content2">
<p>DEMO PAGE </p>
</div>
<div class="content" id="content3" data-stellar-background-ratio="0.5">
<p>DEMO PAGE </p>
</div>
<div class="content" id="content4" data-stellar-background-ratio="0.5">
<p>DEMO PAGE </p>
</div>

//css样式中设置content背景等

3.  js 调用函数

$.stellar({
horizontalScrolling: false,

  $(function(){
$.stellar({
// 设置视差效果方向
horizontalScrolling:false,
// load或者resize事件触发时是否刷新页面
responsive:true
})
})

主要属性