Parallax mouse tracking concept

index.html

<div class="wrapper">
  <div class="container">
    <div class="content content--animated">
      <div class="inner">
         <a href="http://codepen.io/collection/Axemak/" target="_blank" class="btn btn-more">More pens</a>
        <div class="layer layer--cover">
          <div class="layer layer--content layer--parallax" data-offset="8"></div>
          <div class="layer layer--overlay overlay">
            <div class="layer layer--red"></div>
            <div class="layer layer--blue"></div>
            <div class="layer layer--green"></div>
          </div>
          <img data-offset="2" src="http://s32.postimg.org/kyt1lams5/cup_codepen.png" alt="Kristijan Vincetić" class="portrait layer--parall">
        </div>
      </div>

      <div class="elements">
        <h1 class="elements__title">
            Parallax
        </h1>
        <h1 class="elements__title">
            Design
        </h1>
      </div>
    </div>
    <footer class="footer">
      <p>Parallax concept from <a href="http://www.budidiokojinedostaje.hr" target="_blank">www.budidiokojinedostaje.hr</a> and design inspiration from <a href="https://dribbble.com/shots/2707834-VIA-Mixtape-Flow/attachments/547472" target="_blank">Dribble shot</a></p>
    </footer>
  </div>

Parallax mouse tracking concept.markdown

Parallax mouse tracking concept

Parallax effect with mouse tracking. Ideal for subtle parallax animations.

A Pen by Mario Novoselec on CodePen.

License.

script.js

function animateInfoParallax() {
  /**
    Variables used in code
    This prevents function hoisting
  **/
  var animLayer = {},
    hoverLayer = {},
    layerFront = {},
    hoverLayerWidth = 0,
    hoverLayerHeight = 0;

  
    hoverLayer = $(".container");
    animLayer = $(".layer--content");
    layerFront = $(".layer--parall");

    hoverLayerWidth = hoverLayer.width();
    hoverLayerHeight = hoverLayer.height();
  
    var layerOffset = animLayer.data("offset"), //offset values are defined in HTML
      $layer = animLayer,
      cx = Math.ceil(hoverLayerWidth / 2.0),
      cy = Math.ceil(hoverLayerHeight / 2.0),
      frontLayerOffset = layerFront.data("offset");
  
    hoverLayer.mousemove(function(event) {
      var dx = event.pageX - cx,
        dy = event.pageY - cy;

      var tiltx = -(dx / cx),
        tilty = -(dy / cy);

      var lValX = (tiltx * (layerOffset)),
        lValY = (tilty * (layerOffset));
      
      TweenMax.to($layer, 3.5, {
        x: lValX.toFixed(2) + "px",
        y: lValY.toFixed(2) + "px",
        ease: Circ.easeOut
      });

      var lFValX = (tiltx * 2 * (frontLayerOffset * 3)), //Higher values means more parallax
        lFValY = (tilty * (frontLayerOffset * 2));
      
      TweenMax.to(layerFront, 4.5, {
        x: lFValX.toFixed(2) + "px",
        y: lFValY.toFixed(2) + "px",
        ease: Circ.easeOut,
      });
    });
}
animateInfoParallax();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>

style.scss

@import "susy";
@import url(https://fonts.googleapis.com/css?family=Droid+Serif);
$b-red: #d8373f;
$p-black:#201d1d;

/**MIXINS**/

@mixin font-size($psd-font-size, $psd-line-height: $psd-font-size) {
  font-size: $psd-font-size;
  line-height: ($psd-line-height)/$psd-font-size;
}

@mixin letter-spacing($letterspacing) {
  letter-spacing: $letterspacing/1000;
}

@mixin breakpoint($class: custom, $maxmin: max-width, $size: 0) {
  @media ($maxmin: $size) {
    @content;
  }
}

$susy: ( columns: 24, global-box-sizing: border-box, column-width:60px, math: fluid, use-custom: ( clearfix: false));
.wrapper {
  position: relative;
  background: white;
  height: 100vh;
  width: 100%;
}

.container {
  width: 100%;
  height: 100%;
}

.content {
  @include span(20 of 24);
  max-width: 1200px;
  float: none;
  margin: 0 auto;
  height: 600px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 50px;
  z-index: 11;
  .portrait {
    max-width: 100%;
    position: absolute;
    top: 20%;
    left: -65px;
    z-index: 11;
    @include breakpoint(laptop,max-width,1530px){
       left:-80px;
      }
      @include breakpoint(laptopSm,max-width,1230px){
       max-width:70%;
      }
  }
  .elements {
    position: absolute;
    right: -20px;
    top: 20%;
    z-index: 10;
    @include breakpoint(laptop,max-width,1430px){
       top:40%;
      right:90px;
      }
      @include breakpoint(laptopSm,max-width,1230px){
        top:50%;
        right:-20px;
      }
    &__title {
      @include font-size(8.5em, 8em);
      color: $p-black;
       font-family: "Droid Serif", serif;
       @include breakpoint(laptopBig,max-width,1730px){
        @include font-size(7.5em, 7em);
      }
      @include breakpoint(laptopMed,max-width,1430px){
        @include font-size(5.5em, 5em);
      }
         @include breakpoint(laptopSm,max-width,1230px){
        @include font-size(4.5em, 4em);
      }
    }
  }
  .inner{
    @include span(20 of 24);
    max-width: 950px;
    float: none;
    margin: 0 auto;
    height: 550px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100px;
    z-index: 10;
       @include breakpoint(laptop,max-width,1530px){
       width:700px;
      }
    @include breakpoint(laptop,max-width,1430px){
       height:400px;
      }
      @include breakpoint(laptop,max-width,1230px){
       height:350px;
      }
   .btn {
     @include font-size(0.8em,0.8em);
     background:white;
      display: inline-block;
      padding: 15px 20px;
      left: 0;
      color:$p-black;
      text-decoration:none;
      text-transform:uppercase;
     font-family: 'Asap', sans-serif;
     position:relative;
     bottom:20px;
     box-shadow: 3px 3px 14px 1px rgba(0,0,0,0.14);
    }
  }
  .layer--cover {
    width:100;
    height:100%;
    overflow: hidden;
  }
  .layer--content {
    width: 100%;
    height: 100%;
    background: url("http://s32.postimg.org/mppe8mrit/codepen_2.jpg") no-repeat;
    background-size: cover;
    z-index: 8;
    transform: scale(1.2);
  }
}

.footer {
  background: $p-black;
  width: 100%;
  height: 200px;
  position: absolute;
  bottom: 0;
  p{
    opacity:.8;
    font-size:12px;
    color:white;
    position:absolute;
    right:40px;
    bottom:10px;
        font-family: 'Asap', sans-serif;
    font-weight:300;
    a{
      color:#edebce;
    }
  }
}