Mobile-friendly HTML5 Parallax Scroll Plugin With jQuery - Hongkong

File Size: 702 KB
Views Total: 6036
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


$ 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="//"></script>
<script src="hongkong.js"></script>

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


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>
  <div class="unit__inner" data-parallax data-parallax-x>
  <div class="background" data-parallax data-parallax-top>
    <img src="parallax.jpg">

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

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

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

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

6. All customization options.


  // 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]',




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