JQuery视差滚动插件stellar.js

来源：易助科技浏览量：30收藏

简介

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

主要属性

名称	说明
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倍。如果值为小数时最好在样式表中设置

使用

1. 引入文件

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

2. HTML

<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]
//css样式中设置content背景等
<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>

3. 调用

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

JQuery视差滚动插件stellar.js

简介

主要属性

使用

1. 引入文件

2. HTML

3. 调用

相关链接