<img src="http://www.jqueryscript.net/demo/Mouse-aware-Parallax-Effect-with-jQuery-and-TweenMax-Mouse-Parallax/images/background.jpg" alt="New York" class="background">
<img src="http://www.jqueryscript.net/demo/Mouse-aware-Parallax-Effect-with-jQuery-and-TweenMax-Mouse-Parallax/images/1.png" alt="Clouds" class="cloud cloud1">
<img src="http://www.jqueryscript.net/demo/Mouse-aware-Parallax-Effect-with-jQuery-and-TweenMax-Mouse-Parallax/images/2.png" alt="Clouds" class="cloud cloud2">
<img src="http://www.jqueryscript.net/demo/Mouse-aware-Parallax-Effect-with-jQuery-and-TweenMax-Mouse-Parallax/images/3.png" alt="Clouds" class="cloud cloud3">
body {
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.background {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  z-index: 1;
  font-family: Courier;
}
.cloud {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  z-index: 2;
  opacity: 0.8;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  padding: 12px 0;
  text-align: center;
  z-index: 100;
  color: #fff;
  font-family: Courier;
}
.header h1 {
  font-size: 40px;
  font-weight: lighter;
}
.header a {
  font-size: 32px;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid #fff;
  color: #fff;
}
$.fn.parallax = function(resistance, mouse) {
  $el = $(this);
  TweenLite.to($el, 0.2, {
    x: -((mouse.clientX - window.innerWidth / 2) / resistance),
    y: -((mouse.clientY - window.innerHeight / 2) / resistance)
  });
};

$(document).mousemove(function(e) {
  $(".background").parallax(-30, e);
  $(".cloud1").parallax(10, e);
  $(".cloud2").parallax(20, e);
  $(".cloud3").parallax(30, e);
  });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js