pavurya / jarallax

jQuery background image parallax

Just Another Parallax

jQuery background parallax plugin. High performance (translate3d) with fallback (background-position) for old browsers.

Getting Started

Load jQuery(1.7+) and include Jarallax plugin

<!-- Jarallax -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script src='jarallax/jarallax.js'></script>

Set up your HTML

Mandatory requirement for plugin works properly - the selected item should be NOT position: static (for ex. relative).

<div class='jarallax' style='background-image: url(<background_image_url_here>)'>
  Your content here...
</div>

Additional styles

This need for correct show background image before Jarallax initialize end.

.jarallax {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

Call the plugin

A. Data attribute way

<div data-jarallax='{"speed": 0.2}' class='jarallax' style='background-image: url(<background_image_url_here>)'>
  Your content here...
</div>

B. JavaScript way

$('.jarallax').jarallax({
    speed: 0.2
});

Options

Options can be passed in data attributes or in object when you initialize jarallax from script.

name	type	default	description
speed	float	0.5	Parallax effect speed. Provide numbers from 0.0 to 1.0
imgSrc	path	null	Image path. By default used image from background.
imgWidth	number	null	You can provide the natural width and natural height of an image to speed up loading.
imgHeight	number	null
enableTransform	boolean	true	Enable transformations for effect if supported. When option is false - used background-position instead.
zIndex	number	-100	z-index of parallax container.

Images

All demo images from https://www.pexels.com/

License

Copyright (c) 2015 _nK Licensed under the WTFPL license.