stellar.js 视差滚动
Posted 老是坑自己
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了stellar.js 视差滚动相关的知识,希望对你有一定的参考价值。
1.引入包
<script src="js/jquery.min.js"></script> <script src="js/jquery.stellar.js"></script>
2.设置
设置视差元素的随页面滚动的速率
data-stellar-background-ratio="0.3" //数值越大滚动越快
凡是需要做视差滚动的都需要加上样式
background-attachment: fixed;
3.初始化
$(function () { $.stellar({ horizontalScrolling: false, verticalScrolling: true, }); });
==============================================================
$.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(); } });
以上是关于stellar.js 视差滚动的主要内容,如果未能解决你的问题,请参考以下文章