当前位置: 首页 > 工具软件 > Stellar.js > 使用案例 >

stellar.js 视差滚动插件

曹理
2023-12-01

视差滚动插件

视差滚动(Parallax Scrolling)指网页滚动过程中,多层次的元素进行不同程度的移动,视觉上形成立体运动效果的网页展示技术

主要核心就是前景和背景以不同的速度移动,从而创造出3D效果。 这种效果可以给网站一个很好的补充。

下载地址

https://github.com/markdalgleish/stellar.js

特性

视差滚动效果酷炫,适合于个性展示的场合。

视差滚动徐徐展开,适合于娓娓道来,讲故事的场合。

视差滚动容易迷航,需要具备较强的导航功能。

原理

内容和多层次的背景实现或不同速度,或不同方向的运动。

利用background-attachment属性实现。

background-attachment: fixed || scroll || local

Stellar.js是什么?

[stellar.js]是一个 jQuery插件,也就是基于jQuery,能很容易地给网站添加视差滚动效果。 这个插件在jQuery插件库里很流行。
http://markdalgleish.com/projects/stellar.js/ 官网(英文文档)

引用 js包

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

引用html

<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

body {
    font-size: 20px;
    color: white;
    text-shadow: 0 1px 0 black, 0 0 5px black;
}
p {
    padding: 0 0.5em;
    margin: 0;
}
.content {
    background-attachment: fixed;
    height: 400px;
}
#content1 {
    background-image: url("xxx.jpg");
}
#content2 {
    background-image: url("xxx.jpg");
}
#content3 {
    background-image: url("xxx.jpg");
}
#content4 {
   background-image: url("xxx.jpg");
}
#content5 {
   background-image: url("xxx.jpg");");
}
#content6 {
    background-image: url("xxx.jpg");
}

js调用函数

要使用jQuery的选择器选中所需要的元素

$('#someElement').stellar();

window对象直接使用,或则启动效果

$.stellar({
    horizontalScrolling: false,
    responsive: true
});

详细参数

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

默认参数的使用

$.stellar({
  horizontalScrolling: true,
  verticalScrolling: true,

  horizontalOffset: 0,
  verticalOffset: 0,

  responsive: false,

  // 选择 'scroll', 'position', 'margin' or 'transform',
  // or write your own 'scrollProperty' plugin.
  scrollProperty: 'scroll',

  // 'position' 或 'transform',
  positionProperty: 'position',

  // 视差
  parallaxBackgrounds: true,
  parallaxElements: true,

  hideDistantElements: true,

  // Customise how elements are shown and hidden
  hideElement: function($elem) { $elem.hide(); },
  showElement: function($elem) { $elem.show(); }
});

优缺点

  1. 这种效果可以给网站一个很好的补充,但如果滥用,就会很烦人。
  2. 这种通常使用大图作为背景,会导致加载缓慢。

注意点

  1. 可能3以上的jquery版本会报错
  2. data-stellar-background-ratio=“0.3” 设置背景滚动速度
  3. data-stellar-ratio=“2” 设置元素滚动速度
  4. 记得$.stellar()调用
 类似资料: