Hardware-accelerated scrolling parallax plugin for jQuery
The smooth parallax scrolling effect is achieved by using CSS 3D transforms where available. The system falls back to
2D transforms or even regular
left positioning on older browsers.
TODO: make it work on touch scroll devices using iScroll 4
distdirectory in the
<head>of your page
distdirectory at the bottom of your HTML, after jQuery
For regular background images, use the following markup:
<div data-image="image_source_relative_to_page" data-width="image_width_in_pixels" data-height="image_height_in_pixels">
For tiled background images, use the following markup:
If the blocks are just used for parallax effect and don't have any content, give them a specific height in whatever unit you want
If the blocks are to have content, include the content as you would normally. The plugin will create separate blocks for the parallax effect,
Add any common class you want to all your parallax blocks (e.g.
$('.parallax').parallax()to create the effect
demo directory or the demo page for a complete example using both tiled and regular backgrounds.
Dynamic pages / animations
hw-parallax does its work by creating new DOM elements that align with the blocks that have parallax. It already listens
resize events on the
window object in order to reconfigure itself in case a responsive design moves or changes the
size of blocks that have parallax.
Sometimes your own code will resize parallaxed blocks or move them around on the page. When this happens, you can signal
hw-parallax to reconfigure itself by triggering the
hwparallax.reconfigure event on the
Typically you would do that in the callback of your animation sequence.