hongkong.js是一款支持移动端的滚动视觉差特效jquery插件。该jquery可以制作顶部banner在页面向下滚动时的视觉差效果,支持移动端使用。
使用方法
npm
npm i --save hongkong
在页面中引入下面的文件。
<link rel="stylesheet" type="text/css" href="css/hongkong.css"> <script type="text/javascript" src="js/jquery.min.js"></script> <script src="js/hongkong.js" type="text/javascript"></script>
HTML结构
HTML结构如下。
<div class="hero unit"> <div class="unit__inner" data-parallax data-parallax-bottom> <h1>data-parallax-bottom</h1> </div> <div class="unit__inner" data-parallax data-parallax-x> <h1>data-parallax-x</h1> </div> <div class="background" data-parallax data-parallax-top> <img src="parallax.jpg"> </div> </div>
初始化插件
作为jquery插件使用。
$.hongkong();
作为ES6模块使用。
import $ from 'jquery'; import hongkong from 'hongkong'; hongkong($); $.hongkong();
配置参数
-
factor
:滚动的动量因子。默认是通过data-*属性来设置,默认值为:4。 -
mobile
:是否在移动端打开滚动视觉差效果。默认为false。 -
mediaQuery
:使用媒体查询来决定什么时候在移动端打开视觉差效果。默认值max-width: 42em
。 -
selector
:页面中使用滚动视觉差效果的元素的选择器。默认为:data-parallax
。 -
threshold
:显示或隐藏元素的临界值。
可用的data-*属性有:
- data-parallax-top
- data-parallax-bottom
- data-parallax-position-x
- data-parallax-factor
- data-parallax-remove-initial-offset
- data-parallax-remove-general-offset
该jquery支持移动端的滚动视觉差特效插件的github网址为:https://github.com/drublic/hongkong
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!