bower i --save hongkong
Please add hongkong.js
right before the closing body tag. Make sure to include
the dependency jQuery and a requestAnimationFrame polyfill.
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/raf.js/raf.js"></script>
<script src="bower_components/hongkong/hongkong.js"></script>
Just add an attribute data-parallax-top
or data-parallax-bottom
to the
element you want to be animated in the named direction.
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.
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)
selectorBottom
: Selector to use to detect elements that should be scrolled to bottom; default[data-parallax-bottom]
selectorTop
: Selector to use to detect elements that should be scrolled to top; default[data-parallax-top]