Position and load backgrounds based on screen position.
JavaScript CSS HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


useful.parallax.js: Position and load backgrounds based on screen position.

Defers the loading of backgrounds until they come into view. This lowers the time it takes for the initial page to load.

Try the demo.

How to include the script

The stylesheet is best included in the header of the document.

<link rel="stylesheet" href="./css/useful-parallax.css"/>

This include can be added to the header or placed inline before the script is invoked.

<script src="./js/useful-parallax.js"></script>

To enable the use of HTML5 tags in Internet Explorer 8 and lower, include html5.js.

<!--[if lte IE 9]>
	<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>

How to start the script

var parallax = new useful.Parallax().init({
	'scroller' : document.querySelector('.parallax-col'),
	'foregrounds' : document.querySelectorAll('.parallax-col .parallax-row'),
	'backgrounds' : document.querySelectorAll('.parallax-col .parallax-row .parallax-bg'),
	'displacement' : -25,
	'offset' : 0,
	'exponential' : 1,
	'treshold' : 100

scroller : {DOM Element} - This is the page element with the scrollbar. By default this is "window".

foregrounds : {DOM Elements} - A collection of elements that are scrolled in

backgrounds : {DOM Elements} - Optional list of elements that will be translated in a parallax manner.

displacement : {float} - The maximum amount of translation to apply during parallax motions in %.

offset : {float} - A small offset to fine-tune the parallax motion in %.

exponential : {integer} - Apply an exponential curve to the parallax motion.

treshold : {integer} - How far outside the viewport the backgrounds should preload in pixels.

How to build the script

This project uses node.js from http://nodejs.org/

This project uses gulp.js from http://gulpjs.com/

The following commands are available for development:

  • npm install - Installs the prerequisites.
  • gulp import - Re-imports libraries from supporting projects to ./src/libs/ if available under the same folder tree.
  • gulp dev - Builds the project for development purposes.
  • gulp prod - Builds the project for deployment purposes.
  • gulp watch - Continuously recompiles updated files during development sessions.
  • gulp serve - Serves the project on a temporary web server at http://localhost:8000/ .


This work is licensed under a Creative Commons Attribution 3.0 Unported License. The latest version of this and other scripts by the same author can be found at http://www.woollymittens.nl/