Knockout and CSS3 3D transforms to create a parallax effect.
A Pen by Charles Gichuki on CodePen.
Knockout and CSS3 3D transforms to create a parallax effect.
A Pen by Charles Gichuki on CodePen.
<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> |
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); | |
}); |
<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> |
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; | |
} |