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

Lin_R 发布于2019-08-21 10:26 / 2359人阅读

摘要：近些年讨论得很热烈的设计趋势是视觉差滚动效果。在本教程中，我会介绍视觉差滚动和用插件来制作视觉差滚动效果。如果你想使用，可以通过以下命令下载好后，在页面中引用完成后，开始给页面添加视觉差滚动效果。在一个页面运用创建一个视差滚动效果的示例。

近些年讨论得很热烈的设计趋势是视觉差滚动效果。不管你喜不喜欢，很多网站都在用它。在本教程中，我会介绍视觉差滚动和用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

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

完成后，开始给页面添加视觉差滚动效果。这个插件允许将效果添加到任何滚动的元素，例如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：


    TEXT HERE


    TEXT HERE


    TEXT HERE


    TEXT HERE


    TEXT HERE


    TEXT HERE

添加一些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整理编译

云服务器 GPU云服务器视差滚动效果滚动视差视差滚动视差效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85540.html

javascript功能插件大集合前端常用插件 js常用插件

摘要：转载来源包管理器管理着库，并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。转载来源：https://github.com/jobbole/aw... 包管理器管理着 javascript 库，并提供读取和打包它们的工具。•npm – npm 是 javasc...

netmou 2019-08-23 12:28 评论0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：转载来源包管理器管理着库，并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。转载来源：https://github.com/jobbole/aw... 包管理器管理着 javascript 库，并提供读取和打包它们的工具。•npm – npm 是 javasc...

Hydrogen 2019-08-02 11:46 评论0 收藏0
javascript功能插件大集合，写前端的亲们记得收藏

摘要：一个专注于浏览器端和兼容的包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。完全插件化的工具，能在中识别和记录模式。健壮的优雅且功能丰富的模板引擎。完整的经过充分测试和记录数据结构的库。【导读】：GitHub 上有一个 Awesome – XXX 系列的资源整理。awesome-javascript 是 sorrycc 发起维护的 JS 资源列表...

cfanr 2019-08-20 10:34 评论0 收藏0
JavaScript 资源大全中文版

摘要：官网全新的静态包管理器。官网一个整合和官网的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。官网小巧的兼容的所见即所得的富文本编辑器。官网富文本编辑器。官网由制作，适用于每天写作的富文本编辑器。 1. 包管理器管理着 javascript 库，并提供读取和打包它们的工具。 npm：npm 是 javascript 的包管理器。官网 cnpm：cnpm 是由于国...

jzman 2019-08-23 17:18 评论0 收藏0
滚动视差？CSS 不在话下

摘要：可以感受下种不同取值的不同效果使用实现滚动视差首先，我们使用来实现滚动视差。何为滚动视差视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为网页设计的热点趋势，越来越多的网站应用了这项技术。通常而言，滚动视差在前端需要辅助 Javascript 才能实现。当然，其实 CSS 在实现滚动视差效果方面，也有着不俗...

RobinTang 2019-04-23 13:29 评论0 收藏0