High-Performance Background Parallax Effect with jQuery and CSS3 - jarallax

High-Performance Background Parallax Effect with jQuery and CSS3 - jarallax
File Size: 1.38 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Just another jQuery parallax plugin used for adding a smooth parallax scrolling effect to background images using CSS3 3D transforms (translate3d). With a fallback to background-position when CSS transforms are not supported.

Basic usage:

1. Load the jQuery jarallax plugin after you have jQuery library loaded in the html page.

<script src="jquery.min.js"></script>
<script src="jarallax.js"></script>

2. Add a background image to the parallax container.

<div class="jarallax" style="background-image: url(image.jpg);"></div>

3. The required CSS styles for the background image.

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

4. Call the function to enable the plugin.

$('.jarallax').jarallax()

5. Configuration options.

$('.jarallax').jarallax({

  // parallax effect speed. 0.0 - 1.0
  speed             : 0.5,

  // path to your parallax image
  imgSrc            : null,

  // width & height of your parallax image
  imgWidth          : null,
  imgHeight         : null,

  // enable transformations for effect if supported. 
  enableTransform   : true,

  // z-index of parallax container.
  zIndex            : -100
  
})

Change log:

2015-09-27

  • v1.1.0

This awesome jQuery plugin is developed by nk-o. For more Advanced Usages, please check the demo page or visit the official website.