<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="http://mymaplist.com/js/vendor/TweenLite.min.js"></script> <!-- This is a very simple parallax effect achieved by simple CSS 3 multiple backgrounds, made by http://twitter.com/msurguy --> <div class="container"> <div class="row vertical-offset-100"> <div class="col-md-6 col-md-offset-6"> <div class="panel panel-default"> <div class="panel-heading"> <h1 class="panel-title">To help you better, please fill in the form correctly.</h1> </div> <div class="panel-body"> <form accept-charset="UTF-8" role="form"> <fieldset> <div class="form-group"> <input class="form-control" placeholder="Name" name="name" type="text"> </div> <div class="form-group"> <input class="form-control" placeholder="Mobile" name="mobile" type="text"> </div> <div class="form-group"> <input class="form-control" placeholder="E-mail" name="email" type="text"> </div> <!-- Multiple Checkboxes (inline) --> <div class="control-group"> <label class="control-label" for="checkboxes"></label> <div class="controls"> <label class="checkbox inline" for="checkboxes-0"> <input type="checkbox" name="checkboxes" id="checkboxes-0" value="House"> House </label> <label class="checkbox inline" for="checkboxes-1"> <input type="checkbox" name="checkboxes" id="checkboxes-1" value="Flat"> Flat </label> <label class="checkbox inline" for="checkboxes-2"> <input type="checkbox" name="checkboxes" id="checkboxes-2" value="Villa"> Villa </label> <label class="checkbox inline" for="checkboxes-3"> <input type="checkbox" name="checkboxes" id="checkboxes-3" value="Plot"> Plot </label> </div> </div> <input class="btn btn-lg btn-success btn-block" type="submit" value="Login"> </fieldset> </form> </div> </div> </div> </div> </div>

body{ background: url(http://mymaplist.com/img/parallax/back.png); background-color: #444; background: url(http://mymaplist.com/img/parallax/pinlayer2.png),url(http://mymaplist.com/img/parallax/pinlayer1.png),url(http://i61.tinypic.com/34g0w36.png); } .vertical-offset-100{ padding-top:100px; } .col-md-offset-6 { margin-left: 25%; }

$(document).ready(function(){ $(document).mousemove(function(e){ 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" } }); }); });