GTA 5 CSS3 Parallax

gta-5-css3-parallax.markdown

GTA 5 CSS3 Parallax

Knockout and CSS3 3D transforms to create a parallax effect.

A Pen by Charles Gichuki on CodePen.

License.

index.html

<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>
		</div>
	</div>

script.js

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);


		});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>

style.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/tx2ELHt.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;
}