Easy Peasy Parallax Effect with jQuery and CSS

A simplest way to create an interactive background parallax scrolling effect with few lines of Javascript.

See also:

• jQuery Plugin To Add Interative Parallax Effects To Objects - Piao
• Minimalist 3D Parallax Effect with jQuery and CSS3
• jQuery Plugin To Create Interactive Parallax Effects - Real Parallax
• Smooth Parallax Effects with jQuery and CSS3 - woolParalax
• Interactive Mouse Hover Parallax Effect with jQuery - Mouse Parallax
• Simple and Lightweight jQuery Parallax Engine - Parallax.js
• Creating 3D Interative Parallax Background Effects with jQuery - Simples 3D
• Interactive Parallax Effect with jQuery - jparallax

How to use it:

1. Make a position-absolute element on your web page.

<div class="wrapper">
  ...
</div>

2. Add a background image to the container element.

.wrapper {
  background: url(bg.png) repeat 0 0;
  background-size: 500px;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

3. Include the needed jQuery JavaScript library at the bottom of your web page.

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

4. Detect the mousemove event and change the background position of your background image to create an interactive moving background that reacts to viewer's cursor.

$('.wrapper').mousemove(function(e) {
    var x = (e.pageX * -1 / 2), y = (e.pageY * -1 / 2);
    $(this).css('background-position', x + 'px ' + y + 'px');
});

5. You can also implement the peasy parallax effect in vanilla JavaScript without the need of jQuery library.

document.querySelector('.wrap').addEventListener('mousemove', function(e){
  var x = (e.pageX * -1 / 2), y = (e.pageY * -1 / 2);
  this.style.backgroundPosition = x + 'px ' + y + 'px';
});

---

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