GTA 5 Template

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


        });

---------------