<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 ----------> <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="viematefooter"> <div class="container"> <div class="row-fluid"> <div class="span12"> <div class="span2" style="width: 15%;"> <ul class="unstyled"> <li>GitHub<li> <li><a href="#">About us</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact & support</a></li> <li><a href="#">Enterprise</a></li> <li><a href="#">Site status</a></li> </ul> </div> <div class="span2" style="width: 15%;"> <ul class="unstyled"> <li>Applications<li> <li><a href="#">Product for Mac</a></li> <li><a href="#">Product for Windows</a></li> <li><a href="#">Product for Eclipse</a></li> <li><a href="#">Product mobile apps</a></li> </ul> </div> <div class="span2" style="width: 15%;"> <ul class="unstyled"> <li>Services<li> <li><a href="#">Web analytics</a></li> <li><a href="#">Presentations</a></li> <li><a href="#">Code snippets</a></li> <li><a href="#">Job board</a></li> </ul> </div> <div class="span2" style="width: 15%;"> <ul class="unstyled"> <li>Documentation<li> <li><a href="#">Product Help</a></li> <li><a href="#">Developer API</a></li> <li><a href="#">Product Markdown</a></li> <li><a href="#">Product Pages</a></li> </ul> </div> <div class="span2" style="width: 15%;"> <ul class="unstyled"> <li>More<li> <li><a href="#">Training</a></li> <li><a href="#">Students & teachers</a></li> <li><a href="#">The Shop</a></li> <li><a href="#">Plans & pricing</a></li> <li><a href="#">Contact us</a></li> </ul> </div> </div> </div> <hr> <div class="row-fluid"> <div class="span12"> <div class="span8"> •<a href="#">Terms of Service</a> • <a href="#">Privacy</a> • <a href="#">Security</a> • </div> <div class="span4 copyrights"> <p class="muted pull-right">© 2013 Company Name. All rights reserved</p> </div> </div> </div> </div> </div>

.viematefooter{ 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://mymaplist.com/img/parallax/back.png); height: 100%; padding: 50px; } .viematefooter hr { margin-top: 0px; margin-bottom: 0px; border: 1px solid #fff; } .row-fluid [class*="span"]{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;float:left;margin-left:2.127659574468085%;*margin-left:2.074468085106383%;} .row-fluid [class*="span"]:first-child{margin-left:0;} .row-fluid .controls-row [class*="span"]+[class*="span"]{margin-left:2.127659574468085%;} .row-fluid .span12{width:100%;*width:99.94680851063829%;} .row-fluid .span11{width:91.48936170212765%;*width:91.43617021276594%;} .row-fluid .span10{width:82.97872340425532%;*width:82.92553191489361%;} .row-fluid .span9{width:74.46808510638297%;*width:74.41489361702126%;} .row-fluid .span8{width:65.95744680851064%;*width:65.90425531914893%; color: blue;} .row-fluid .span7{width:57.44680851063829%;*width:57.39361702127659%;} .row-fluid .span6{width:48.93617021276595%;*width:48.88297872340425%;} .row-fluid .span5{width:40.42553191489362%;*width:40.37234042553192%;} .row-fluid .span4{width:31.914893617021278%;*width:31.861702127659576%;} .row-fluid .span3{width:23.404255319148934%;*width:23.351063829787233%;} .row-fluid .span2{width:14.893617021276595%;*width:14.840425531914894%;} .row-fluid .span1{width:6.382978723404255%;*width:6.329787234042553%;} [class*="span"].hide,.row-fluid [class*="span"].hide{display:none;} [class*="span"].pull-right,.row-fluid [class*="span"].pull-right{float:right;} ul.unstyled,ol.unstyled{margin-left:0;list-style:none;} ul.unstyled:first-child { color: white; } .viematefooter .copyrights { color: white; }

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