The smooth parallax scrolling effect is achieved by using CSS 3D transforms where available. The system falls back to
2D transforms or even regular top and left positioning on older browsers.
TODO: make it work on touch scroll devices using iScroll 4
-
Include
parallax.min.cssfrom thedistdirectory in the<head>of your page -
Include
parallax.min.jsfrom thedistdirectory 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:
<div data-tile="tiled_image_source_relative_to_page"> -
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,
z-indexed at-1 -
Add any common class you want to all your parallax blocks (e.g.
class="parallax") -
Use
$('.parallax').parallax()to create the effect
Check the demo directory or the demo page for a complete example using both tiled and regular backgrounds.
hw-parallax does its work by creating new DOM elements that align with the blocks that have parallax. It already listens
to 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 window object:
$(window).trigger('hwparallax.reconfigure');Typically you would do that in the callback of your animation sequence.