Steve Fenton

Jquery Background Parallax

Quick Links

Visit the jQuery Background Parallax project hub, which has a demonstration and download for this plugin on JS Plugins JavaScript Plugin Library.

Background Parallax Demonstration.

Description

The jQuery Background Parallax project is a plugin for the jQuery JavaScript Framework, which animates the background of an HTML element at a different speed to the foreground, which gives the illusion of depth.

If you find my open source projects and jQuery plugins useful,
please consider making a donation!

Requirements

• jquery.js
• jquery.backgroundparallax.js

CSS

/* Recomended styles */
		
		#horizontal {
			background-image: url(horizontal.png);
			background-position: 0px 0px; /* horizontal vertical */
			height: 300px;
			width: 300px;
			overflow: auto;
		}
		/* Optional styles */
		
		#horizontal {
			float: left;
			margin-left: 100px;
		}
		#horizontal > div {
			height: 270px;
			width: 900px;
			margin: 0;
			color: White;
		}
		#horizontal .panel {
			width: 31%;
			padding: 0 1%;
			float: left;
		}

JavaScript

$("#horizontal").backgroundparallax();

You Are Here: Home » JavaScript » Background Parallax