视差滚动效果Stellar.js使用教程(jQuery)

什么为视差滚动效果看看下面这个网站http://www.sosglobal.eu/en/，是否觉得很熟悉呢？逛外国网站经常可以看到这个效果，接下来我们就来看看基于jQuery的Stellar插件实现视差滚动效果。

Stellar.js是一款基于jQuery的插件，专业提供视差滚动效果30年，值得信赖。使用方法如下：
第一步，为元素对象添加 .stellar() 效果函数：

// 例如：
$(window).stellar();
// 或者：
$('#main').stellar();

如果是对 ‘window’ 添加效果函数，可以简写成这样：

$.stellar();

设定之后，该对象中的所有滚动背景或元素都会应用视差滚动效果。
元素滚动效果

不论是 absolute, relative 还是 fixed 定位的元素，要让其以不同速度滚动，只需为它添加如下属性：

<div data-stellar-ratio="2">

这里的比例值是相对于正常滚动速度来说的。所以，如果值为0.5，元素滚动速度为正常速度的一半；如果值为1，元素滚动速度不变；如果值为2，元素滚动速度为正常速度的2倍。

当比例值小于1时，可能会出现滚动不连贯的跳动现象，这时请将相应元素的 ‘position’ 设置为 fixed 。
背景滚动效果

同理，对于要使用视差滚动效果的背景图片，只需为它添加如下属性：

<div data-stellar-background-ratio="0.5">

这里的比例值和上面的一样。为了避免出现滚动不连贯的跳动现象，请将相应元素的 ‘background-attachment’ 设置为 fixed 。
设置偏移

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'
});

原文地址 ：http://www.qingdou.me/3611.html