使用Stellar.js为网站添加滚动视差效果
发布时间:2019-07-31
发布者:eidea
浏览次数:7910
近些年讨论得很热烈的设计趋势是视觉差滚动效果。不管你喜不喜欢,很多网站都在用它。发现Stellar.js 是一个偶然的机会,查看一个国外非常酷的网站源码的时候,发现它。然后再搜索一下得知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/
视差滚动(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/
相关新闻推荐
- 网站优化中,友情链接的重要性 2019-07-16
- 做一个企业官网多少钱比较合理? 2019-01-19
- 浅谈网站的信息内容更新频率 2018-07-20
- 广州网站建设公司哪家好? 2019-02-17
- 什么是定制高端网站建设企业? 2019-08-21
- 网络营销的三大主要策略 2019-06-28