"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 lang='en' 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/hudsonmarinho/pen/FHGeK" /> <style class="cp-pen-styles">#scroll-animate { overflow: hidden; } #scroll-animate-main { width: 100%; left: 0; position: fixed; } #heightPage, #heightScroll { width: 10px; top: 0; position: absolute; z-index: 99; } #heightPage { left: 0; } #heightScroll { right: 0; } header { width: 100%; height: 100%; background: url(https://raw.githubusercontent.com/hudsonmarinho/header-and-footer-parallax-effect/master/assets/images/bg-header.jpg) no-repeat 50% 50%; top: 0; position: fixed; z-index: -1; } footer { width: 100%; height: 300px; background: gray; bottom: -300px; position: fixed; z-index: -1; } .content { height: 1000px; min-height: 1000px; background: #ededed; position: relative; z-index: 1; } .wrapper-parallax { margin-top: 100%; margin-bottom: 300px; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5); } h1{ width: 100%; height: 100%; padding: 0; margin: 0; text-transform: uppercase; text-align: center; font-family: Helvetica; font-size: 150px; color: #fff; } header h1{} .content h1{ line-height: 1000px; color: #999; } footer h1 { line-height: 300px; } header, footer, #scroll-animate-main { -webkit-transition-property: all; -moz-transition-property: all; transition-property: all; -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; transition-duration: 0.4s; -webkit-transition-timing-function: cubic-bezier(0, 0, 0, 1); -moz-transition-timing-function: cubic-bezier(0, 0, 0, 1); transition-timing-function: cubic-bezier(0, 0, 0, 1); }</style></head><body> <div id="scroll-animate"> <div id="scroll-animate-main"> <div class="wrapper-parallax"> <header> <h1>Header</h1> </header> <section class="content"> <h1>Content</h1> </section> <footer> <h1>Footer</h1> </footer> </div> </div> </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 >function scrollFooter(scrollY, heightFooter) { console.log(scrollY); console.log(heightFooter); if(scrollY >= heightFooter) { $('footer').css({ 'bottom' : '0px' }); } else { $('footer').css({ 'bottom' : '-' + heightFooter + 'px' }); } } $(window).load(function(){ var windowHeight = $(window).height(), footerHeight = $('footer').height(), heightDocument = (windowHeight) + ($('.content').height()) + ($('footer').height()) - 20; // Definindo o tamanho do elemento pra animar $('#scroll-animate, #scroll-animate-main').css({ 'height' : heightDocument + 'px' }); // Definindo o tamanho dos elementos header e conteúdo $('header').css({ 'height' : windowHeight + 'px', 'line-height' : windowHeight + 'px' }); $('.wrapper-parallax').css({ 'margin-top' : windowHeight + 'px' }); scrollFooter(window.scrollY, footerHeight); // ao dar rolagem window.onscroll = function(){ var scroll = window.scrollY; $('#scroll-animate-main').css({ 'top' : '-' + scroll + 'px' }); $('header').css({ 'background-position-y' : 50 - (scroll * 100 / heightDocument) + '%' }); scrollFooter(scroll, footerHeight); } }); //# sourceURL=pen.js </script> </body></html>

Related: See More

Rotating CSS Card
parallax image scrolling
Parallax Login Form

Questions / Comments: