https://github.com/drublic/hongkong

A parallax scroll effect plugin
https://github.com/drublic/hongkong

javascript jquery parallax parallax-scrolling

Last synced: 2 days ago
JSON representation

A parallax scroll effect plugin

• Host: GitHub
• URL: https://github.com/drublic/hongkong
• Owner: drublic
• License: mit
• Archived: true
• Created: 2014-07-16T08:01:52.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2020-04-04T14:32:51.000Z (almost 5 years ago)
• Last Synced: 2024-12-27T00:15:59.655Z (26 days ago)
• Topics: javascript, jquery, parallax, parallax-scrolling
• Language: HTML
• Homepage: http://drublic.github.io/hongkong/
• Size: 1.46 MB
• Stars: 45
• Watchers: 6
• Forks: 9
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Hongkong - jQuery based plugin for parallax scrolling

[![Build Status](https://secure.travis-ci.org/use-init/init.svg?branch=master)](http://travis-ci.org/drublic/hongkong)

[![Dependency Status](https://david-dm.org/drublic/hongkong.svg)](https://david-dm.org/drublic/hongkong)

[![devDependency Status](https://david-dm.org/drublic/hongkong/dev-status.svg)](https://david-dm.org/drublic/hongkong#info=devDependencies)

## Install via npm

    npm i --save hongkong

## Usage

Please add `bin/hongkong.js` to your website. Make sure to include

the dependency jQuery.

    

    

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](./LICENSE) (MIT)

Copyright (c) 2014 Hans Christian Reinl