JSFiddle - React, Tailwind, and code Playground

by trkli

HTML

<!--this vectors from :http://www.freepik.com">Designed by Freepik-->
        <!-- I made some edit on the Original Vectors -->
        <svg version="1.1" id="imageContainer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
        	 width="100%" height="100%" viewBox="-450 -100 1642.919 860" style="enable-background:new 0 0 1642.919 860;"
        	 xml:space="preserve">
                <g id="sky" class="st17 parallax" data-offset="90">
                	<path class="st11 parallax" data-offset="100" d="M381.387,476.216c0-13.791-14.267-24.971-31.868-24.971c-3.959,0-7.744,0.568-11.24,1.602
                		c3.799-4.111,6.043-9.16,6.043-14.623c0-13.791-14.268-24.97-31.87-24.97c-7.938,0-15.193,2.278-20.773,6.04
                		c-1.315-9.14-8.924-16.786-19.355-20.21c1.323-2.744,2.054-5.717,2.054-8.824c0-4.146-1.298-8.053-3.581-11.494
                		c12.297-3.463,21.092-12.678,21.092-23.504c0-5.945-2.655-11.4-7.082-15.689c7.984-4.537,13.182-11.902,13.182-20.221
                		c0-13.791-14.269-24.971-31.87-24.971v-0.001c0-13.79-14.269-24.971-31.87-24.971c-2.959,0-5.82,0.323-8.539,0.914
                		c-3.457-6.507-10.328-11.618-18.859-13.969c2.414-3.517,3.787-7.538,3.787-11.812c0-13.79-14.269-24.971-31.87-24.971
                		c-0.778,0-1.547,0.029-2.31,0.072c1.484-2.884,2.31-6.032,2.31-9.333c0-13.79-14.27-24.97-31.871-24.97
                		c-5.4,0-10.485,1.057-14.943,2.915c-3.584-10.717-16.026-18.625-30.829-18.625c-17.602,0-31.87,11.181-31.87,24.97
                		c0,11.171,9.362,20.626,22.273,23.817c-5.198,4.443-8.371,10.363-8.371,16.865c0,8.442,5.352,15.9,13.536,20.42
                		c-8.185,4.52-13.536,11.978-13.536,20.419c0,1.291,0.125,2.56,0.366,3.799c-0.123-0.001-0.243-0.007-0.366-0.007
                		c-17.602,0-31.871,11.181-31.871,24.97c0,4.204,1.332,8.163,3.674,11.639c-16.249,1.143-28.987,11.836-28.987,24.863
               ...

CSS

*{
  padding:0;
  margin:0;
}



.parallax {
  width: 200px;
  height: 100px;
  background: black;
}

JavaScript

$(window).on('mousemove',function(e) {

var width = $(window).width(),
    height = $(window).height(),
    offsetX = 0.5-e.pageX/width,
    offsetY = 0.5-e.pageY/height,
    $parallaxItem = $('.parallax');

    $parallaxItem.each(function(i,el){
      var offset=parseInt($(el).data('offset')),       translate="translate3d("+Math.round(offsetX*offset)+"px,"+Math.round(offsetY*offset)+"px,0px)";
      $(el).css({
        '-webkit-transform':translate,
        'transform':translate,
        '-moz-transform':translate
      });
    });
  });