视差滚动效果jQuery Stellar.js使用

设置偏移

Stellar.js最强大的功能莫过于其对元素的排列对齐

当偏移容器到达屏幕边缘——或者到达设定的偏移位置时，容器内的所有元素刚好对齐。这样一来，你就能轻易地构造出复杂的视差滚动效果。

要同时给所有元素设置偏移，请传入以下参数：

$.stellar({
  horizontalOffset: 40, //设置横向偏移，默认单位：px
  verticalOffset: 150 //设置纵向偏移，默认单位：px
});

你也可以单独给元素添加以下data属性：

<div data-stellar-ratio="2"
     data-stellar-horizontal-offset="40"
     data-stellar-vertical-offset="150">

设置偏移容器

默认情况下，偏移是相对于偏移容器来说的（，而非相对于容器内的元素）。也就是说，容器内的元素是absolute定位，而容器本身是relative定位。（可能我自己能理解原文的意思，但是不好用中文表述..原文：By default, offsets are relative to the element’s offset parent. This mirrors the way an absolutely positioned element behaves when nested inside an element with a relative position.）

所谓的“偏移容器”，遵循CSS规则，只要某个子元素的父元素 position 属性为relative 或者 absolute ，那么该父元素就是其偏移容器了。

如果要指定DOM中其他祖先元素为该子元素的偏移容器，请为该祖先元素添加如下的data属性：

<div data-stellar-offset-parent="true">

您也可以单独对偏移容器设置偏移：

<div data-stellar-offset-parent="true"
     data-stellar-horizontal-offset="40"
     data-stellar-vertical-offset="150">

以上各个偏移的优先级同样遵循CSS规则，从高到低依次是 元素属性 > 偏移容器属性 > JavaScript传入的属性。

（此时，由于设置了偏移容器，当蓝色框的边缘到达偏移位置时，所有星星同时对齐，形成整个单词）

此时只有当每个黄色框的边缘分别到达偏移位置时，其中的星星才会对齐，构成字母。因为此时，每个字母对应的 div 层即是其默认的偏移容器。

首页中，正是通过指定 h2 为偏移容器，我们才能保证星星的对齐是基于 h2，而不是DOM树中下一级的 div 元素，从而实现预期的效果。（一次形成整个单词而不是一个一个字母出现）

设置滚动和定位

通过设置 scrollProperty 的值，你可以设置元素的滚动方式，比如设置为CSS3的 ‘transform’ ，那么代码该这么写：

$('#gallery').stellar({
  scrollProperty: 'transform'
});

通过使用CSS3的 ‘transform’ ，我们才能实现 iOS 上的视差滚动 。

同样，你也可以通过设置 positionProperty 的值，来设置元素的定位方式，比如同样设置为CSS3的 ‘transform’ ，那么代码该这么写：

$('#gallery').stellar({
  positionProperty: 'transform'
});

关于 scrollProperty 和 positionProperty 这两个属性可用的属性值，请参考下面的“所有属性”小节

如果内置的属性值不能满足你的需求，你还可以 自定义插件

所有属性

下面列出了Stellar.js内置的所有可用属性，以及它们的默认属性值：

$.stellar({
  // 设置滚动的方向是“竖直方向”还是“水平方向”，或者两个方向都有
  horizontalScrolling: true, //默认水平方向开启滚动
  verticalScrolling: true, //默认竖直方向开启滚动

  // 设置全局偏移
  horizontalOffset: 0, //默认水平偏移为0
  verticalOffset: 0, //默认竖直偏移为0

  // 窗口加载完毕或者改变大小时是否刷新滚动元素
  responsive: false, //默认不刷新

  // 设置滚动方式
  // 可以选择 'scroll', 'position', 'margin' 或者 'transform'
  // 或者 使用自己定义的 'scrollProperty' 插件.
  scrollProperty: 'scroll', //默认为 'scroll'

  // 设置定位方式
  // 可以选择 'position' 或者 'transform'
  // 或者 使用自己定义的 'positionProperty' 插件.
  positionProperty: 'position', //默认为 'position'

  // 设置两种滚动效果的开关
  parallaxBackgrounds: true, //默认开启背景滚动
  parallaxElements: true, //默认开启元素滚动

  // 滚动元素滚动到视口（viewport）以外时是否隐藏
  hideDistantElements: true, //默认为隐藏

  // 自定义元素如何出现和消失
  hideElement: function($elem) { $elem.hide(); },
  showElement: function($elem) { $elem.show(); }
});

使用自己定义的 ‘scrollProperty’ 插件

作为一个功能强大的插件，Stellar.js 内置以下滚动属性值：
‘scroll’, ‘position’, ‘margin’ 和 ‘transform’

如果以上属性值已经无法满足你要使用的滚动效果了，不妨自己写一个插件~ 比如说，内置的属性值没有 ‘margin’，那么你可以这样定义 ‘margin’：

$.stellar.scrollProperty.margin = {
  getLeft: function($element) {
    return parseInt($element.css('margin-left'), 10) * -1;
  },
  getTop: function($element) {
    return parseInt($element.css('margin-top'), 10) * -1;
  }
}

然后，直接传入该 ‘scrollProperty’ 属性值就好了：

$.stellar({
  scrollProperty: 'margin'
});

使用自己定义的 ‘positionProperty’ 插件

作为一个功能强大的插件，Stellar.js 内置以下两个定位属性值：’position’ 和 ‘transform’。前者通过css的 top 和 left 属性来定位元素，后者通过css3中的transforms来定位元素。

同样，如果你需要对元素的定位进行更好的控制，不妨自己写一个插件~比如说，内置的属性值没有 ‘position’，那么你可以这样定义 ‘position’：

$.stellar.positionProperty.position = {
  setTop: function($element, newTop, originalTop) {
    $element.css('top', newTop);
  },
  setLeft: function($element, newLeft, originalLeft) {
    $element.css('left', newLeft);
  }
}

同样，直接传入该 ‘positionProperty’ 属性值就好了：

$.stellar({
  positionProperty: 'position'
});

如果你出于技术原因，要同时设置滚动和定位两个属性值，可以定义一个 ‘setPosition’ 函数：

$.stellar.positionProperty.foobar = {
  setPosition: function($el, x, startX, y, startY) {
    $el.css('transform', 'translate3d(' +
      (x - startX) + 'px, ' +
      (y - startY) + 'px, ' +
      '0)');
  }
}

$.stellar({
  positionProperty: 'foobar'
});