前端杂谈 · Web

使用jquery插件Stellar.js实现视差滚动效果

•̀.̫•́✧ · 10月29日 · 2019年本文1882字 · 阅读5分钟413

Stellar.js是一款基于jQuery的插件, 这个插件允许将视差滚动效果添加到任何滚动的元素,例如window对象,或者其他元素。 要使用jQuery的选择器选中所需要的元素,在绑定stellar()方法即可。

1.引入包

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

2.设置

元素滚动效果

不论是 absolute, relative 还是 fixed 定位的元素,要让其以不同速度滚动,只需为它添加如下属性:

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

这里的比例值是相对于正常滚动速度来说的。所以,如果值为0.5,元素滚动速度为正常速度的一半;如果值为1,元素滚动速度不变;如果值为2,元素滚动速度为正常速度的2倍。当比例值小于1时,可能会出现滚动不连贯的跳动现象,这时请将相应元素的 ‘position’ 设置为 fixed 。

背景滚动效果

设置视差元素的随页面滚动的速率

data-stellar-background-ratio="0.3"  //数值越大滚动越快

这里的比例值和上面的一样。为了避免出现滚动不连贯的跳动现象,请将相应元素的 ‘background-attachment’ 设置为 fixed 。

 background-attachment: fixed;

3.初始化

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


为元素对象添加 .stellar() 效果函数:
$(function () {
    // 例如:
    $(window).stellar();

    // 或者:
    $('#main').stellar();

    // 如果是对 ‘window’ 添加效果函数,可以简写成这样:
    $.stellar();
});

设置偏移

Stellar.js最强大的功能莫过于其对元素的排列对齐,当偏移容器到达屏幕边缘——或者到达设定的偏移位置时,容器内的所有元素刚好对齐。这样一来,你就能轻易地构造出复杂的视差滚动效果。要同时给所有元素设置偏移,请传入以下参数:

$.stellar({
horizontalOffset: 40, //设置横向偏移,默认单位:px
verticalOffset: 150 //设置纵向偏移,默认单位:px
});

你也可以单独给元素添加以下data属性:

<div data-stellar-ratio="2" data-stellar-horizontal-offset="40" data-stellar-vertical-offset="150">

所有属性

下面列出了Stellar.js内置的所有可用属性,以及它们的默认属性值:

$.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(); }
});
0 条回应