支持移动端的滚动视觉差特效jquery插件

支持移动端的滚动视觉差特效jquery插件

hongkong.js是一款支持移动端的滚动视觉差特效jquery插件。该jquery可以制作顶部banner在页面向下滚动时的视觉差效果,支持移动端使用。

使用方法

1
2
npm
npm i --save hongkong

在页面中引入下面的文件。

1
2
3
<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结构如下。

1
2
3
4
5
6
7
8
9
10
11
<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插件使用。

1
$.hongkong();

作为ES6模块使用。

1
2
3
4
5
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
当前内容只有登录了才能查看,如果您已经注册,请登录
2

发表评论