<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <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"> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend>MY form</legend> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="name"></label> <div class="col-md-6"> <input id="name" name="name" type="text" placeholder="name" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="mobile"></label> <div class="col-md-6"> <input id="mobile" name="mobile" type="text" placeholder="Mobile" class="form-control input-md" required=""> </div> </div> </fieldset> </form> </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" } }); }); });