JSFiddle - React, Tailwind, and code Playground

by Hugo Vale Pereira

HTML

<div id="background" class="layer-0"></div>
<div id="x-axis" class="axis"></div>
<div id="y-axis" class="axis"></div>
<div id="planet-1" class="planet layer-1"></div>
<div id="planet-2" class="planet layer-2"></div>

SCSS

@import "compass/css3";

@mixin dimension($diameter) {
  margin: -($diameter / 2) 0 0 0-($diameter / 2);
  height: $diameter;
  width: $diameter;
}

///

html,
body {
  background-color: rgb(1,12,13);
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  padding: 50px 0; 
}

.axis {
  background-color: rgba(255,255,255, 0.2);
  position: absolute;
  z-index: 100;
}

.planet {
  background-size: cover;
  left: 50%;
  position: absolute;
  top: 50%;
}

#background {
  background-image: url('http://www.alienresearchcorp.com/space/hd-wallpapers/amazing/img/l/moment-in-space-cvi.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  bottom: -20%;
  left: -10%;
  position: absolute;
  right: -10%;
  top: -20%;
}

#x-axis {
  bottom: -50%;
  left: 50%;
  top: -50%;
  width: 1px;
}

#y-axis {
  left: 0;
  top: 50%;
  right: 0;
  height: 1px;
}

#planet-1 {
  @include dimension(150px);
  background-image: url('http://th02.deviantart.net/fs71/PRE/i/2012/337/3/6/planet_png_by_phip_phantom-d5mwylq.png');
  z-index: 20;
}

#planet-2 {
  @include dimension(200px);
  background-image: url('http://fc04.deviantart.net/fs71/i/2013/070/e/d/ice_planet___kronos_by_khrymsyn-d5xqmnm.png');
  z-index: 10;
}

JavaScript

var $layer_0 = $('.layer-0'),
    $layer_1 = $('.layer-1'),
    $layer_2 = $('.layer-2'),
    $x_axis  = $('#x-axis'),
    $y_axis  = $('#y-axis'),
    $container = $('body'),
    container_w = $container.width(),
    container_h = $container.height();

$(window).on('mousemove.parallax', function(event) {
  var pos_x = event.pageX,
      pos_y = event.pageY,
      left  = 0,
      top   = 0;

  left = container_w / 2 - pos_x;
  top  = container_h / 2 - pos_y;
  
  TweenMax.to(
    $x_axis, 
    1, 
    { 
      css: { 
        transform: 'translateX(' + (left * -1) + 'px)' 
      }, 
      ease:Expo.easeOut, 
      overwrite: 'all' 
    });
  
  TweenMax.to(
    $y_axis, 
    1, 
    { 
      css: { 
        transform: 'translateY(' + (top * -1) + 'px)' 
      }, 
      ease:Expo.easeOut, 
      overwrite: 'all' 
    });
  
  TweenMax.to(
    $layer_2, 
    1, 
    { 
      css: { 
        transform: 'translateX(' + left / 12 + 'px) translateY(' + top / 6 + 'px)' 
      }, 
      ease:Expo.easeOut, 
      overwrite: 'all' 
    });
  
  TweenMax.to(
    $layer_1, 
    1, 
    { 
      css: { 
        transform: 'translateX(' + left / 4 + 'px) translateY(' + top / 2 + 'px)' 
      }, 
      ease:Expo.easeOut, 
      overwrite: 'all' 
    });
  
  TweenMax.to(
    $layer_0,
    10,
    {
      css: {
        transform: 'rotate(' + left / 200 + 'deg)'
      },
      ease: Expo.easeOut,
      overwrite: 'none'
    }
  )
});