更新时间:2021-12-20 00:00:42
惯性滚动和视差效果插件
您可以使用 npm 安装它:
1 | npm install luxy.js --save |
或者只是在您的页面中包含脚本:
1 | < script src = "path/to/luxy.js" charset = "utf-8" ></ script > |
在您的项目中包含 luxy.js 并初始化:
1 2 3 | < script charset = "utf-8" > luxy.init(); </ script > |
使用包装器选项中指定的元素包装整个内容。请排除固定元素。
1 2 3 | < div id = "luxy" > ... 全部内容 </ div > |
将 .luxy-el 添加到要指定视差效果的元素。
1 2 3 | < div id = "luxy" > < div class = "luxy-el" ></ div > </ div > |
使用 data-speed-y 属性指定视差效果的速度,使用 data-offset 属性指定偏移量。
1 2 3 | < div id = "luxy" > < div class = "luxy-el" data-speed-y = "5" data-offset = "-50" ></ div > </ div > |
如果要水平移动,指定 data-horizontal="1" 并使用 data-speed-x 属性指定水平方向的速度。
1 2 3 | < div id = "luxy" > < div class = "luxy-el" data-horizontal = "1" data-speed-x = "-5" ></ div > </ div > |
名称 | 默认 | 描述 |
---|---|---|
wrapper | '#luxy' | 整个内容包装元素。 |
targets | '.luxy-el' | 视差效果针对元素。 |
wrapperSpeed | 0.08 | 惯性滚动速度。 |
特别申明:
本站所有资源都是由网友投稿发布,或转载各大下载站,请自行检测软件的完整性!
本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!
如有侵权请联系我们删除下架,联系方式:lei1294551502@163.com