图片/图形
支持移动端的滚动视觉差特效jQuery插件
PetitQ
hongkong.js 是一款支持移动端的滚动视觉差特效 jquery 插件。该 jquery 可以制作顶部 banner 在页面向下滚动时的视觉差效果，支持移动端使用。
使用方法
在页面中引入下面的文件。
也想出现在这里？联系我们吧
<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
Github 网址：https://github.com/drublic/hongkong
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
