JSFiddle - React, Tailwind, and code Playground

by aitnasser

HTML

<!doctype html>
<html lang="en" class="no-js">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="https://codyhouse.co/demo/parallax-hero-image/css/reset.css"> <!-- CSS reset -->
	<link rel="stylesheet" href="https://codyhouse.co/demo/parallax-hero-image/css/style.css"> <!-- Resource style -->
	<script src="https://codyhouse.co/demo/parallax-hero-image/js/modernizr.js"></script> <!-- Modernizr -->
  	
	<title>Parallax Hero Image | CodyHouse</title>
</head>
<body>
	<div class="cd-background-wrapper">
		<figure class="cd-floating-background">
			<img src="https://codyhouse.co/demo/parallax-hero-image/img/cd-img-1.jpg" alt="image-1">
			<img src="https://codyhouse.co/demo/parallax-hero-image/img/cd-img-2.png" alt="image-2">
			<img src="https://codyhouse.co/demo/parallax-hero-image/img/cd-img-3.png" alt="image-3">
		</figure>
	</div>
<script src="https://codyhouse.co/demo/parallax-hero-image/js/jquery-2.1.1.js"></script> <!-- Resource jQuery -->
</body>
</html>

JavaScript

jQuery(document).ready(function($){

      //check if the browser supports the device orientation event   
               if(window.DeviceOrientationEvent) {
                  console.log("Browser supports the device orientation");
                  //registering deviceorientation event listener
                  window.addEventListener("deviceorientation", process, false);
                } else {
                  // The browser does not support the device orientation event
                   console.log("Browser does not support the device orientation");
                }

            function process(event) {
             //put the code to be executed when  device orientation is changed
              console.log("Device Orientation changed");
              var alpha = event.alpha;
              var beta = event.beta;
              var gamma = event.gamma;
              console.log("Alpha : " + alpha + "Beta : " + beta + "Gamma : " + gamma ); 
            }
            
	//check media query
	var mediaQuery = window.getComputedStyle(document.querySelector('.cd-background-wrapper'), '::before').getPropertyValue('content').replace(/"/g, '').replace(/'/g, ""),
		//define store some initial variables
		halfWindowH = $(window).height()*0.5,
		halfWindowW = $(window).width()*0.5,
		//define a max rotation value (X and Y axises)
		maxRotationY = 5,
		maxRotationX = 3,
		aspectRatio;

	//detect if hero <img> has been loaded and evaluate its aspect-ratio
	$('.cd-floating-background').find('img').eq(0).load(function() {
		aspectRatio = $(this).width()/$(this).height();
  		if( mediaQuery == 'web' && $('html').hasClass('preserve-3d') ) initBackground();
	}).each(function() {
		//check if image was previously load - if yes, trigger load event
  		if(this.complete) $(this).load();
	});
	
	//detect mouse movement
	$('.cd-background-wrapper').on('mousemove', function(event){
		if( mediaQuery == 'web' && $('html').hasClass('preserve-3d') )...