Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- GTA 5 Template
- 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>
- -------------------------
- 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;
- }
- -----------------------
- 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);
- });
- ---------------
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement