Easy Background Image Parallax Effect with jQuery and CSS3

Easy Parallax is a lightweight jQuery plugin used for adding a subtle parallax effect (plus rotate, scale, fade in and fade out effects) to background image. Powered by requestAnimationFrame method and CSS3 transforms. Works perfectly on most browsers and even touch devices.

How to use it:

1. Add a 'Hero' header to your web page.

<div class="header"></div>

2. Make the header container fix positioned and add a parallax image as a background.

.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: inherit;
  background-image: url(https://unsplash.it/3000/2000?image=873);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 0;
  height: 500px;
}

3. Load jQuery library and the jQuery Easy Parallax plugin at the end of the html document.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> 
<script src="jquery.parallax.js"></script>

4. Active the parallax effect on scroll.

$(".header").parallax({
  y: "70%"
});

5. More properties that you can pass into the plugin through either JavaScript or Html5 data attributes as in data-parallax='{"Y":"30%"}'

$(".header").parallax({

  // boolean or selector. Make an elements' position fixed during the scene.
  pin: true 

  // translateY
  y: "70%", 

  // translateX
  x: 0,

  // translateZ
  z: 0,

  // scale effect. or scaleX and scaleY
  scale: 2, 

  // Rotation in degrees.
  rotate: 180, 

  // number (0 - 1)
  opacity: 0properties

  // Hex or rgb() color string.
  color: "#ff0000",

  // Hex or rgb() color string.
  backgroundColor: "#ff0000",

  // number or string (percentage or viewport units)
  // Better use "y" where possible.
  top: 0,

  // number or string (percentage or viewport units)
  // Better use "x" where possible.
  left: 0,

  // number or string (percentage or viewport units)
  // Better use "scaleX" where possible.
  width: 0,

  // number or string (percentage or viewport units)
  // Better use "scaleY" where possible.
  height: 0,

  // number or string (percentage or viewport units)
  // Better use "x" where possible.
  backgroundPositionX: 0,

  // number or string (percentage or viewport units)
  // Better use "y" where possible.
  backgroundPositionY: 0
  
});

6. Global settings. These settings can be specified for all properties, or each individually.

// number or string (percentage or viewport units) or callback function
// If you need to start the scene after document's beginning or "triggerElement"'s beginning.
offset: 0,

// number or string (percentage or viewport units) or callback function
// Percentages are calculated against element dimensions rather than viewport: "50%" == 0.5 * $(el).outerWidth(true).
// For viewport relative values, use viewport units: vh or vw: "100vh" == $(window).height().
// Setting duration to "0" will run it till the end of document.
duration: '0',

// f you need another element to act as the trigger. 
// If you don't need a trigger, set this to "null" or "false".
triggerElement: // the element

// number or string (percentage or viewport units) or callback function
// 0% is top of the viewport and 100% is bottom of the viewport.
triggerHook: '100%',

// function or string
ease: 'linear',

// string ("x" or "y")
axis: 'y'

Change log:

2016-10-15

• Microsoft IE and Edge support

2016-04-25

• fixed for touch devices.

2015-10-23

• fixed percentage values for translate3d

2015-10-20

• bugfix.

2015-10-14

• bug fixes for pinning, color, left, top

2015-10-12

• bug fix "pin" property

2015-10-11

• initialisation bug fixes

2015-10-10

• bug fixes
• rename to data-parallax

2015-10-09

• bug fixes

2015-10-08

• viewport units and duration percentage refers to element dimensions rather than viewport

2015-10-07

• bugfix
• added ease option

---

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