51Testing软件测试论坛

标题: Stellar.js 使用方法 [打印本页]

作者: 悠悠小仙仙 时间: 2019-1-29 15:54
标题: Stellar.js 使用方法
下载好后，在页面中引用：

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

复制代码

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

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

复制代码

对于window对象可以用下面的方法（网页就用此方法）：

$.stellar();

复制代码

这样，Stellar.js库就会在元素滚动时搜索parallax背景或元素，并重新定位。

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;

例

<div data-stellar-background-ratio="0.5" style="background:url(images/test.jpg) no-repeat center center;">
<p>THE TEST</p>
</div>

复制代码

最后，invokingstellar()启动效应：

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

复制代码

欢迎光临 51Testing软件测试论坛 (http://bbs.51testing.com/)