JSFiddle - React, Tailwind, and code Playground

by devangkantharia

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<div class='banner'>
		<div id="parallxWrapper">
<div class="parallxBackground" data-bind="attr: { style:'-webkit-transform:perspective(1000px) rotateY(' + relativeMouse.x() + 'deg) rotateX(' + relativeMouse.y() + 'deg);transform:perspective(1000px) rotateY(' + relativeMouse.x() + 'deg) rotateX(' + relativeMouse.y() + 'deg)' }">
				<div class="parallxLayerLogo"></div>
				<div class="parallxLayerRStar"></div>
				<div class="parallxLayerShooter"></div>
			</div>
		</div>
	</div>
	<div class="container" style="margin-top:60px;">
		<div class="col-md-8	">
			<h2>CSS3 Parallax Demo</h2>
			<p class='lead'>Knockout js too</p>
			<p>Working only in Firefox for now.</p>
      <p>Nulla quis turpis id nibh egestas rutrum porta eu lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Morbi cursus accumsan augue quis blandit. Nullam sed odio ut erat pulvinar tristique sed ut elit. Pellentesque felis nisl, posuere sed placerat sed,malesuada varius ipsum. In consequat massa non arcu tincidunt vestibulum. Suspendisse et ultrices urna, eget consequat dui.</p>
      
            <p>Nulla quis turpis id nibh egestas rutrum porta eu lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Morbi cursus accumsan augue quis blandit. Nullam sed odio ut erat pulvinar tristique sed ut elit. Pellentesque felis nisl, posuere sed placerat sed,malesuada varius ipsum. In consequat massa non arcu tincidunt vestibulum. Suspendisse et ultrices urna, eget consequat dui.</p>
		</div>
	</div>

CSS

html { height:100%; }
		body {
			min-height: 100%;
			height: auto !important;
      margin:0px;
		}
		.banner {
			background-color:  black;
		}
		#parallxWrapper {
			margin:auto;
			height:540px;
			width:1000px;
		}
		.parallxBackground {
			height:100%;
			background-image:url("http://i.imgur.com/GSqh8aA.jpg");
			border-radius:10px;
			padding:10px;
			-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
		}
		.parallxLayerLogo {
			width:300px;
			height:225px;
			margin-top:50px;
			margin-left:50px;
			background-image:url("http://i.imgur.com/9A9KbR8.png");
			position:absolute;
			-webkit-transform:translateZ(90px);
			-webkit-transition: all 0.2s;
			transform:translateZ(90px);
			transition: all 0.2s;
		}
		.parallxLayer:hover {
			-webkit-transform:scale(1.05);
			-webkit-transform:translateZ(30px);
			transform:scale(1.05);
			transform:translateZ(30px);
			cursor:pointer;
		}
		.parallxLayerRStar{
			width:100px;
			height:90px;
			margin-left:880px;
			margin-top:450px;
			float:right;
			background-image:url("http://i.imgur.com/Mh37eRt.png");
			position:absolute;
			-webkit-transform:translateZ(20px);
			transform:translateZ(20px);
		}
		.parallxLayerShooter{
			width:1000px;
			height:694px;
			float:right;
			background-image:url("http://i.imgur.com/YWCpfik.png");
			position:absolute;
			-webkit-transform:translateZ(50px);
			transform:translateZ(50px);
		}		
		.parallxLayerRStar:hover {
			-webkit-transform:scale(1.05);
			-webkit-transform:translateZ(30px);
			transform:scale(1.05);
			transform:translateZ(30px);
			cursor:pointer;
		}


h2, .h2 {
    font-size: 30px;
}
h1, h2, h3 {
    margin-bottom: 10px;
    margin-top: 20px;
}

.lead {
    font-weight: 200;
    line-height: 1.4;
    margin-bottom: 20px;
}

body {
    color: #333333;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

.col-md-8 {
  min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

JavaScript

/*
*****************************
GTA 5 CSS3 Parallax 
*****************************
*/

var parallx = null;
var demoCount = 0;
		function Parallx() {
			var self = this;
			$("body").mousemove(function(e) {

					parallax.mouseX(e.pageX);
					parallax.mouseY(e.pageY);	

			});


			self.sensitivityMultiplier = ko.observable(0.03);
			self.wrapperOffset = $('#parallxWrapper').offset();
			self.wrapperCenter = {
				x:ko.computed(function() { return self.wrapperOffset.left + ($('#parallxWrapper').width()/2) }, this),
				y:ko.computed(function() { return self.wrapperOffset.top + ($('#parallxWrapper').height()/2) }, this)
			};
			self.mouseX = ko.observable(0);
			self.mouseY = ko.observable(0);
			self.relativeMouse = { 
				x:ko.computed(function() { return (self.mouseX() - self.wrapperCenter.x()) * self.sensitivityMultiplier() }, this),
				y:ko.computed(function() { return ((self.mouseY() - self.wrapperCenter.y()) * -1) * self.sensitivityMultiplier()}, this) 
			};
			self.origin = {
				x:ko.computed(function() { return ((self.mouseX())/$( window ).width()) * 100 }, this),
				y:ko.computed(function() { return ((self.mouseY())/$( window ).height()) * 100 }, this) 
			};
		};

		$(document).ready(function() {
			parallax = new Parallx();
			ko.applyBindings(parallax);

			setInterval(function() {
				if(demoCount < 130){
					parallax.mouseX(parallax.mouseX() + 10);
					demoCount+=1;
				}
			}, 40);


		});