用 Stellar.js 制做视差滚动效果

近些年讨论得很热烈的设计趋势是视觉差滚动效果。无论你喜不喜欢，不少网站都在用它。在本教程中，我会介绍视觉差滚动和用jQuery插件Stellar.js来制做视觉差滚动效果。

视差滚动（Parallax Scrolling）是什么？

视差滚动是当用户滚动页面时，前景和背景以不一样的速度移动，从而创造出3D效果。 这种效果能够给网站一个很好的补充，但若是滥用，就会很烦人。 有些彻底由这种效果驱动的网站会让人以为不优雅。 由于这种效果一般使用大图像作背景，网站资源大量增长，致使加载很是缓慢。

有些这样滥用的例子，好比介绍Kinvara saukoni 3的网站， 和大小有20MB（之前是50MB的！）的 Oakley – I am invincible 。

如今有了对这个效果的认识，让咱们看看如何使用stellar.js来创造它。

Stellar.js是什么？

stellar.js 是一个 jQuery插件，能很容易地给网站添加视差滚动效果。 尽管已经中止了维护，但它很是稳定，与最新版本的jQuery兼容，不少开发者也在使用它。 这个插件在jQuery插件库里很流行，你可能早已据说过了。

如今，让咱们看看如何使用它。

Stellar.js入门

Stellar.js很容易上手。 第一步是下载插件并将它连接到你的页面。 能够经过Bower访问Stellar.js的GitHub 仓库。 若是你想使用Bower，能够经过如下命令：

bower install jquery.stellar

下载好后，在页面中引用：

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

完成后，开始给页面添加视觉差滚动效果。 这个插件容许将效果添加到任何滚动的元素，例如window对象，或者其余元素。 要使用jQuery的选择器选中所须要的元素，在绑定stellar()方法便可。

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

对于window对象能够用下面的方法：

$.stellar();

这样，Stellar.js库就会在元素滚动时搜索parallax背景或元素，并从新定位。
在一个页面运用stellar.js建立一个视差滚动效果的示例。

选项

stellar.js像其余插件同样有必定的灵活性。 能够设置不少参数来知足需求。 stellar.js容许定义普通选项，会应用到每一个元素。 设置普通配置必须经过stellar()方法，而对应的元素要设置data-*属性。 我不一一介绍每一个配置的用法，具体能够看这里。

第一个普通选项是设置效果的方向。 经典的滚动效果是从上到下，或者反过来。也能够指定一个从左到右的效果，或者反过来。 经过设置horizontalScrolling 和verticalScrolling的bool值完成。 其默认值是true。

另外一个有趣的选项是responsive。 它是用来指定load或resize事件触发时，是否刷新页面。 默认是false。

最后介绍一下hideDistantElements选项。 指定是否要隐藏移出视线的元素。 若是不想隐藏，就设置为false。

单个元素选项中data-stellar-background-ratio比较经常使用。 接受一个正整数的值，能够改变它被应用到元素的影响速度。 例如，data-stellar-background-ratio="0.5"意味着改变速度为天然滚动速度的一半。 若是想使这个属性值低于1，建议在样式表里设置background-attachment: fixed;。

如今你知道这个插件，你能够配置它，它的时间去看比赛。

演示

利用上面介绍的属性作一个例子。 首先，咱们须要设置标记。 在下面的代码中将建立6个包含一些文本div：

<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： 在演示中将使用三个图像，每一个重复两次。 由于要给最后桑元素添加data-stellar-background-ratio属性，因此还要设置background-attachment: fixed;。
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("http://www.tamperlock.com/blog/wp-content/uploads/2014/08/london-england.jpg");
}
#content2 {
    background-image: url("http://ocdn.eu/images/pulscms/ZjU7MDQsMCwzMiwzODQsMWZhOzA2LDMyMCwxYzI_/1eb29a70dabd0994cdefaad01ca3c884.jpg");
}
#content3 {
    background-image: url("http://www.zeus.aegee.org/magazine/wp-content/uploads/napoli-golfo-vesuvio.jpg");
}
#content4 {
    background-image: url("http://www.tamperlock.com/blog/wp-content/uploads/2014/08/london-england.jpg");
}
#content5 {
    background-image: url("http://ocdn.eu/images/pulscms/ZjU7MDQsMCwzMiwzODQsMWZhOzA2LDMyMCwxYzI_/1eb29a70dabd0994cdefaad01ca3c884.jpg");
}
#content6 {
    background-image: url("http://www.zeus.aegee.org/magazine/wp-content/uploads/napoli-golfo-vesuvio.jpg");
}

最后，咱们须要踢的invokingstellar()启动效应。在这个演示中咱们也会设置一些经常使用选项：

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

效果：

https://jsfiddle.net/fb301gve/embedded/result/

英文原文：An Introduction to Parallax Scrolling Using Stellar.js
由SegmentFault整理编译