Easy Peasy Parallax Effect with jQuery and CSS

Easy Peasy Parallax Effect with jQuery and CSS
File Size: 150 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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

See also:

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.