滚动视觉差效果插件-Stellar.js

兼容性

所有现代浏览器

IE9+

准备工作

jQuery.js ——>下载地址

Stellar.js ——>下载地址

使用方法

在</body>之前加入引用

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

首先,设置该方法作用域

$(window).stellar();
// or:
$('#main').stellar();

可这么简写

$.stellar();

接下来就可以对各种元素添加不同的滚动速度了,不论它的position属性是absolute,relative还是fixed,如:

<div data-stellar-ratio="2">

如果是要给背景图添加滚动速度,需这样写:

<div data-stellar-background-ratio="2" >

这个插件是相当强大的说,下面列下其内置可用属性及默认值:

$.stellar({
    // 设置滚动的方向是“竖直方向”还是“水平方向”,或者两个方向都有
    horizontalScrolling: true, //默认水平方向开启滚动
    verticalScrolling: true, //默认竖直方向开启滚动
    // 设置全局偏移
    horizontalOffset: 0, //默认水平偏移为0
    verticalOffset: 0, //默认竖直偏移为0
    // 窗口加载完毕或者改变大小时是否刷新滚动元素
    responsive: false, //默认不刷新
    // 设置滚动方式
    // 可以选择 'scroll', 'position', 'margin' 或者 'transform'
    // 或者 使用自己定义的 'scrollProperty' 插件.
    scrollProperty: 'scroll', //默认为 'scroll'
    // 设置定位方式
    // 可以选择 'position' 或者 'transform'
    // 或者 使用自己定义的 'positionProperty' 插件.
    positionProperty: 'position', //默认为 'position'
    // 设置两种滚动效果的开关
    parallaxBackgrounds: true, //默认开启背景滚动
    parallaxElements: true, //默认开启元素滚动
    // 滚动元素滚动到视口(viewport)以外时是否隐藏
    hideDistantElements: true, //默认为隐藏
    // 自定义元素如何出现和消失
    hideElement: function($elem) { $elem.hide(); },
    showElement: function($elem) { $elem.show(); }
});

如果还不能满足你的需求,它还可以自定义,具体详情可移至其官方文档查阅,因为其页面调用了google的一些东东的原因,所以国内访问可能比较慢,莫急或者开代理访问。

发表评论

电子邮件地址不会被公开。 必填项已用*标注