🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Hongkong.js lightweight, ES 5/6 compatible, mobile-friendly jQuery plugin to implement smooth, fully configurable parallax scrolling effects on your webpage.

scrolling parallax

Documentation

Hongkong - jQuery based plugin for parallax scrolling

Build Status Dependency Status devDependency Status

Install via npm

npm i --save hongkong 

Usage

Please add bin/hongkong.js to your website. Make sure to include the dependency jQuery.

<script src="node_modules/jquery/dist/jquery.js"></script> <script src="node_modules/hongkong/bin/hongkong.js"></script> 

Just add the attribute data-parallax. For directions of the "floating" element please use data-parallax-top or data-parallax-bottom.

You can add a data-parallax-factor with a value which is an integer to change the factor of which the element should move. Default is 4.

Then call

$.hongkong(); 

somewhere within your JavaScript.

[ES6 | ES2015 | ES2016 | ES2017] modules

With ES6 you can use Hongkong as follows:

import $ from 'jquery'; import hongkong from 'hongkong';  hongkong($); $.hongkong(); 

Options

You can pass options to Hongkong to customize it a bit:

  • factor: default factor to use for momentum if no other is set via a data-attribute; default: 4
  • mobile: support parallax effect on mobile; default: false
  • mediaQuery: Media query to match against when disabling parallax on mobile; default: (max-width: 42em)
  • selector: Selector to use to detect elements that should be scrolled; default [data-parallax]
  • threshold: Set threshold for showing and hiding elements; default 0

Data attributes

  • data-parallax-top
  • data-parallax-bottom
  • data-parallax-position-x
  • data-parallax-factor
  • data-parallax-remove-initial-offset
  • data-parallax-remove-general-offset

Development

Run npm i inside this folder. Start a development server with npm start.

License

The MIT License (MIT) Copyright (c) 2014 Hans Christian Reinl


You May Also Like