使用Stellar.js进行视差滚动介绍

过去几年中讨论最多的网页设计趋势之一是视差滚动效果。 无论您是否喜欢它，很多网站都在使用它。 在本教程中，我将向您简要介绍视差滚动，并展示如何使用称为Stellar.js的jQuery插件在网站中重现它。

什么是视差滚动？

视差滚动涉及到背景以与前景不同的速率移动，并在向下滚动页面时产生3D效果。 这种效果可以很好地添加到任何网站上，但是不幸的是，如果滥用它，可能会很烦人。 您会不时发现完全由这种效果提供支持的网站，您的体验将不会很优美。 由于这种效果通常会使背景中的图像动起来，因此网站的总权重大大增加，导致加载速度非常慢。

我认为，此类滥用的一些示例是介绍Kinvara 3的Saukoni网站，以及著名的Oakley –我是无敌的网站，其重量约为20Mb （以前约为50Mb！）。

现在您已经知道了这种效果的外观，让我们看看如何利用Stellar.js来创建它。

什么是Stellar.js？

Stellar.js是一个jQuery插件，可让您轻松地向您的网站添加视差滚动效果。 尽管不再对其进行维护，但它仍然非常稳定，与jQuery的最新版本兼容，并且许多开发人员在其网站中使用了它。 这个jQuery插件在jQuery插件注册表中很流行，因此您可能已经听说过。

现在，我已经描述了该插件的功能，让我们看看如何在您的网站上使用它。

Stellar.js入门

开始使用Stellar.js非常简单。 第一步是下载插件并将其包含在您的页面中。 您可以通过访问Stellar.js的GitHub存储库或Bower获得Stellar.js。 如果要使用Bower，则必须键入以下命令：

bower install jquery.stellar

下载后，必须在包含jQuery之后使用常规script元素在页面中包含Stellar.js，如下所示：

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

完成此步骤后，您将全部设置为在页面中采用视差滚动效果。 此插件可让您将效果应用于任何滚动元素，例如window对象或您可能具有的任何其他元素。 为此，您必须使用jQuery的构造函数选择元素，然后在其上调用stellar()方法。

下面显示了一个在window对象上使用此库的最小示例：

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

对于window对象，该库还提供了一个不错的速记，如下所示：

$.stellar();

此时，库将搜索指定元素内的任何视差背景或元素，并在元素滚动时重新放置它们。

如果您想要一个使用Stellar.js创建视差滚动效果的页面的示例，则可以看一下 。

选件

与其他许多插件一样， Stellar.js具有一定程度的灵活性。 实际上，它允许您设置几个参数并调整插件的工作方式以适应您的需求。 Stellar.js允许您定义常规选项，即用于每个元素的选项以及每个元素的选项。 您要设置的常规配置在调用它时必须传递给stellar()方法，而基于每个元素的选项是通过使用一些data-*属性来设置的。 在本节中，我不会介绍所有可用的选项，因此，如果您想进一步研究，可以阅读存储库的这一特定部分 。

您可以定义的第一个常规选项是确定希望效果允许的方向。 经典滚动效果是从上到下，反之亦然，但是您也可以指定从左到右的效果，反之亦然，或者甚至两者都指定。 为此，您可以调整两个布尔属性horizontalScrolling和verticalScrolling 。 它们的默认值为true 。

另一个有趣的选择是responsive 。 它用于指定在window对象上触发load和resize事件时是否必须刷新视差内容。 其默认值为false 。

我要讨论的最后一个常规选项是hideDistantElements 。 此属性的默认值为true并指定要隐藏移到视口之外的视差元素。 如果您不希望出现这种情况，则必须将此选项设置为false 。

我想介绍的唯一的逐元素选项是data-stellar-background-ratio ，因为它经常使用。 后者接受一个正数作为其值，并允许您更改对其应用到的元素的效果的速度。 例如， data-stellar-background-ratio="0.5"意味着将速度更​​改为自然滚动速度的一半。 如果要使用小于1的属性，文档建议设置background-attachment: fixed; 在元素的样式。

现在您已经知道了该插件的功能以及如何配置它，现在该再次看到它的实际效果了。

演示版

在本节中，我们将开发一个使用Stellar.js插件以及我们在上一节中讨论过的一些选项的演示。 首先，我们需要设置标记。 在以下代码中，我们将创建六个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>

有了此HTML，我们需要编写一些CSS来定义所使用的背景图像。 在我们的演示中，我们将使用三个重复两次的图像。 因为我们将在最后三个div上使用data-stellar-background-ratio属性，所以我们还将添加background-attachment: fixed; 在CSS中。

最终的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");
}

最后，我们需要通过调用stellar()来启动效果。 在此演示中，我们还将设置一些常规选项：

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

下面显示了先前代码的实时演示，并且还可以作为JSFiddle获得 。

结论

在本文中，我向您介绍了Stellar.js，这是一个jQuery插件，可让您在网站页面上创建视差滚动效果。 我没有介绍所有可用的选项和效果，但是本教程应该让您足够感兴趣，以了解更多信息。

您如何看待Stellar.js？ 您听说过或使用过它吗？

From: https://www.sitepoint.com/introduction-parallax-scrolling-using-stellar-js/