JSFiddle - React, Tailwind, and code Playground

by anteprimorac

HTML

<div class="page">
    <div class="background-wrapper">
        <div class="background"></div>
    </div>
    <div class="slicejack-wrapper">
        <div class="slicejack"></div>
    </div>
</div>

CSS

.page {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
}

.background-wrapper, .slicejack-wrapper {
    position: fixed;
    top: -100px;
    right: -100px;
    bottom: -100px;
    left: -100px;
}
    .background-wrapper .background, .slicejack-wrapper .slicejack {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
		background: url( 'http://slicejack.com/shared/bgparallax-demo.png' ) center center no-repeat;
        background-size: cover;
    }
    .slicejack-wrapper .slicejack {
        background-image: url( 'http://slicejack.com/shared/bgparallax-logo.png' );
        background-size: 50%;
    }

JavaScript

;( function( $ ) {
	var _has3d = null;
	var has3d = function() {
		if ( _has3d !== null )
			return _has3d;

		if ( ! window.getComputedStyle ) {
			_has3d = false;
			return false;
		}

		var el = document.createElement( 'p' ),
				has3d,
				transforms = {
					'webkitTransform': 	'-webkit-transform',
					'OTransform': 			'-o-transform',
					'msTransform': 			'-ms-transform',
					'MozTransform': 		'-moz-transform',
					'transform': 				'transform'
				};

		document.body.insertBefore( el, null );

		for ( var t in transforms ) {
			if ( el.style[t] !== undefined ) {
				el.style[t] = "translate3d( 1px, 1px, 1px )";
				has3d = window.getComputedStyle( el ).getPropertyValue( transforms[t] );
			}
		}

		document.body.removeChild( el );

		_has3d = ( has3d !== undefined && has3d.length > 0 && has3d !== "none" ) ? true : false;
		return _has3d;
	};

	var _win = { width: 0, height: 0 },
		wrapper = { x: 0, y: 0 },
		$background,
		$slicejack,
		rAF = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function( callback ) { window.setTimeout( callback, 1000 / 60 ) };
	
	var resize_handler = function() {
		_win.width = $( window ).width();
		_win.height = $( window ).height();

		var diff = 0;
		if ( _win.width > _win.height ) {
			diff = _win.width - _win.height;
			wrapper.x = 100;
			wrapper.y = diff / 4 + 100;
		}
		else if ( _win.width < _win.height ) {
			diff = _win.height - _win.width;
			wrapper.x = diff / 4 + 100;
			wrapper.y = 100;
		}
		else {
			wrapper.x = 100;
			wrapper.y = 100;
		}

		var wrapper_css = {
			top: '-' + wrapper.y + 'px',
			right: '-' + wrapper.x + 'px',
			bottom: '-' + wrapper.y + 'px',
			left: '-' + wrapper.x + 'px'
		};
		
		$background.css( wrapper_css );
		$slicejack.css( wrapper_css );
		
		$( document ).trigger( 'recalcmouse' );
	};
	
	var mouse = { x: 0, y: 0, lx: -1, ly: -1, cx: 0, cy: 0 };
	
	$(...