stellar.js 视差滚动插件

「爱情、让人受尽委屈。」 2022-04-01 15:23 230阅读 0赞

# 视差滚动插件 #

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

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

## 下载地址 ##

[https://github.com/markdalgleish/stellar.js][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/][http_markdalgleish.com_projects_stellar.js] 官网（英文文档）

### 引用 js包 ###

### 引用html ###

### 引入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
    });

### 详细参数 ###

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>horizontalScrolling 和 verticalScrolling</td> 
   <td>该配置项用来设置视差效果的方向。horizontalScrolling设置水平方向，verticalScro设置垂直方向， 为布尔值，默认为true</td> 
  </tr> 
  <tr> 
   <td>responsive</td> 
   <td>该配置项用来制定load或者resize时间触发时是否刷新页面，其值为布尔值，默认为false</td> 
  </tr> 
  <tr> 
   <td>hideDistantElements</td> 
   <td>该配置项用来设置移出视线的元素是否隐藏，其值为布尔值，若不想隐藏则设置为false`</td> 
  </tr> 
  <tr> 
   <td>data-stellar-ratio=“2”</td> 
   <td>定义了此元素针对页面滚动的速度比率，比如，0.5为页面滚动的50%，2为页面滚动的200%，所以数值越大，你可以看到页面元素滚动速度越快。</td> 
  </tr> 
  <tr> 
   <td>data-stellar-background-ratio</td> 
   <td>该配置项用在单个元素中，其值为一个正数，用来改变被设置元素的影响速度。 例如 值为0.3时，则表示背景的滚动速度为正常滚动速度的0.3倍。如果值为小数时最好在样式表中设置</td> 
  </tr> 
 </tbody> 
</table>

### 默认参数的使用 ###

$.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()调用

[https_github.com_markdalgleish_stellar.js]: https://github.com/markdalgleish/stellar.js
[http_markdalgleish.com_projects_stellar.js]: http://markdalgleish.com/projects/stellar.js/