"parallax"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/simonmoon/pen/uegAo" /> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'> <style class="cp-pen-styles">@import url("https://fonts.googleapis.com/css?family=Nunito"); body { padding: 0; margin: 0; height: 100%; width: 100%; background: url("http://i60.tinypic.com/5ofqs5.jpg") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; overflow: hidden; font-family: 'Nunito' sans-serif; } .textcontain { position: absolute; top: 500px; text-align: center; width: 100%; } #scene { width: 100%; height: 1100px; background-color: transparent; } li.layer { width: 100%; height: 100%; list-style-type: none; } .chart { background: url("http://i60.tinypic.com/21llf09.png") no-repeat top center; position: absolute; top: 50%; left: 50%; width: 880px; height: 880px; margin-top: -700px; margin-left: -440px; } .palmistry { background: url("http://i57.tinypic.com/14kxiu1.png") no-repeat top center; width: 600px; height: 500px; position: absolute; top: 119px; left: 50%; margin-left: -300px; } .starsbg { background: url("http://i60.tinypic.com/abi9o1.png") center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 100%; height: 100%; } .starsmg { background: url("http://i61.tinypic.com/2z4wylh.png") left center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 100%; height: 100%; } .starsfg { background: url("http://i58.tinypic.com/280jybr.png") center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 100%; height: 100%; } .title { width: 10%; margin-left: auto; margin-right: auto; text-align: center; position: absolute; top: -20px; left: -150px; font-size: 3.2em; -webkit-font-smoothing: antialiased; text-shadow: rgba(255,255,255,0.8) 0px 0px 20px; color: #fff; letter-spacing: 8px; } .titletwo { width: 60%; margin-left: auto; margin-right: auto; text-align: center; position: absolute; top: 240px; left: 520px; font-size: 3.2em; -webkit-font-smoothing: antialiased; text-shadow: rgba(255,255,255,0.8) 0px 0px 20px; color: #fff; letter-spacing: 8px; } </style></head><body> <div id="scene"> <li class="layer" data-depth="0.00"></li> <li class="layer" data-depth="0.20"> <div class="starsbg"></div> </li> <li class="layer" data-depth="0.40"> <div class="starsmg"></div> </li> <li class="layer" data-depth="0.60"> <div class="starsfg"></div> </li> <li class="layer" data-depth="0.80"> <div class="chart"></div> </li> <li class="layer" data-depth="1.0"> <div class="palmistry"> <p class="title">simon moon</p> <p class="titletwo">design <br> + <br> psychic hotline</p> </div> </li> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/parallax/1.1.1/parallax.min.js'></script> <script >//using parallax.js https://github.com/wagerfield/parallax var scene = document.getElementById('scene'); var parallax = new Parallax(scene); // faster parallax in firefox via https://blog.keithclark.co.uk/faster-scrolling-parallax-websites-in-firefox/ (function(doc) { var root = doc.documentElement; if ("MozAppearance" in root.style) { var scrollbarWidth = root.clientWidth; root.style.overflow = "scroll"; scrollbarWidth -= root.clientWidth; root.style.overflow = ""; var scrollEvent = doc.createEvent("UIEvent") scrollEvent.initEvent("scroll", true, true); function scrollHandler() { doc.dispatchEvent(scrollEvent) } doc.addEventListener("mousedown", function(e) { if (e.clientX > root.clientWidth - scrollbarWidth) { doc.addEventListener("mousemove", scrollHandler, false); doc.addEventListener("mouseup", function() { doc.removeEventListener("mouseup", arguments.callee, false); doc.removeEventListener("mousemove", scrollHandler, false); }, false) } }, false) doc.addEventListener("DOMMouseScroll", function(e) { if (!e.ctrlKey && !e.shiftKey) { root.scrollTop += e.detail * 16; scrollHandler.call(this, e); e.preventDefault() } }, false) } })(document); //# sourceURL=pen.js </script> </body></html>

Related: See More

Material Bootstrap Wizard
parallax image scrolling
Parallax Login Form

Questions / Comments: