flip_to_front Parallax

Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.

Introduction

Check out the demo to get a better idea of it.

Open Demo

Parallax HTML Structure

	            	
<div class="parallax-container">
	<div class="parallax"><img src="img/parallax1.jpg"></div>
</div>

Initialization

	            	
$(document).ready(function(){
	$('.parallax').parallax();
});

Parallax Customization

The parallax container height is what defines how much of the image can be seen. This is set to a default of 500px. You can add your own style to override this.

	            	
.parallax-container {
	height: "your height here";
}