<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--
* parallax_login.html
* @Author original @msurguy (tw) -> http://bootsnipp.com/snippets/featured/parallax-login-form
* @Tested on FF && CH
* @Reworked by @kaptenn_com (tw)
* @package PARALLAX LOGIN.
-->
<script src="http://mymaplist.com/js/vendor/TweenLite.min.js"></script>
<body>
<div class="container">
<div class="row vertical-offset-100">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-default">
<div class="panel-heading">
<div class="row-fluid user-row">
<p>Welcome</p>
</div>
</div>
<div class="panel-body">
<p>Welcome</p>
</div>
</div>
</div>
</div>
</div>
</body>
</div>
/**
* parallax.css
* @Author Original @msurguy -> http://bootsnipp.com/snippets/featured/parallax-login-form
* @Reworked By @kaptenn_com
* @package PARALLAX LOGIN.
*/
body {
background-color: #444;
background: url(http://s18.postimg.org/l7yq0ir3t/pick8_1.jpg);
}
.vertical-offset-100 {
padding-top: 100px;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
margin: auto;
}
.panel {
margin-bottom: 20px;
background-color: rgba(255, 255, 255, 0.75);
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
/**
* parallax.js
* @Author original @msurguy (tw) -> http://bootsnipp.com/snippets/featured/parallax-login-form
* @Tested on FF && CH
* @Reworked by @kaptenn_com (tw)
* @package PARALLAX LOGIN.
*/
$(document).ready(function() {
$(document).mousemove(function(event) {
TweenLite.to($("body"),
.5, {
css: {
backgroundPosition: "" + parseInt(event.pageX / 8) + "px " + parseInt(event.pageY / '12') + "px, " + parseInt(event.pageX / '15') + "px " + parseInt(event.pageY / '15') + "px, " + parseInt(event.pageX / '30') + "px " + parseInt(event.pageY / '30') + "px",
"background-position": parseInt(event.pageX / 8) + "px " + parseInt(event.pageY / 12) + "px, " + parseInt(event.pageX / 15) + "px " + parseInt(event.pageY / 15) + "px, " + parseInt(event.pageX / 30) + "px " + parseInt(event.pageY / 30) + "px"
}
})
})
})
