Mobile-friendly HTML5 Parallax Scroll Plugin With jQuery - Hongkong

Hongkong.js lightweight, ES 5/6 compatible, mobile-friendly jQuery plugin to implement smooth, fully configurable parallax scrolling effects on your webpage. Powered by window.requestAnimationFrame() web API and CSS3's transition & transform properties.

Installation:

# NPM
$ npm install --save hongkong

# Bower
$ bower install --save hongkong

How to use it:

1. Put the following JavaScript and CSS files into the webpage. Make sure you first have jQuery library included.

<link href="hongkong.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="hongkong.js"></script>

2. Initialize the library and we're ready to go.

$.hongkong();

3. Add the required 'data-parallax' attribute and a direction attribute of your choice to the target element.

<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>

4. You can also use the data-parallax-factor attribute with a value to change the factor of which the element should move.

<div class="unit__inner" data-parallax data-parallax-bottom data-parallax-factor="3">
  <h1>data-parallax-bottom</h1>
</div>

5. If you'd like to remove the offset:

<div class="unit__inner" data-parallax data-parallax-bottom data-parallax-remove-initial-offset>
  <h1>data-parallax-bottom</h1>
</div>

<div class="unit__inner" data-parallax data-parallax-bottom data-parallax-remove-general-offset>
  <h1>data-parallax-bottom</h1>
</div>

6. All customization options.

$.hongkong({

  // enable the parallax scrolling on mobile
  mobile: false,

  // disable the parallax scrolling
  mediaQuery: '(max-width: 42em)',

  // threshold for showing and hiding elements
  threshold: 0,

  // default selector
  selector: '[data-parallax]',

});

Changelog:

2019-06-22

• v1.4.0: Upgrade to new dependencies and webpack config

---

This awesome jQuery plugin is developed by drublic. For more Advanced Usages, please check the demo page or visit the official website.