分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

stellar.js 视差滚动

发布时间:2023-09-06 02:10责任编辑:赖小花关键词: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, //默认水平偏移为0verticalOffset: 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 视差滚动

原文地址:https://www.cnblogs.com/lskzj/p/9497716.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved