css Simple Header and Footer Parallax Effect

In this example below you will see how to do a css Simple Header and Footer Parallax Effect with some HTML / CSS and Javascript

from Simple Header and Footer Parallax Effect

Thumbnail
This awesome code was written by agustibr, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright agustibr ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>css Simple Header and Footer Parallax Effect</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class='wrapper-parallax'>
  <header>Header</header>
  <div class='content'>Content</div>
  <footer>Footer</footer>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/agustibr/css-simple-header-and-footer-parallax-effect-yyqXgq */
html,
body {
  margin: 0;
  height: 100%;
}

header,
footer,
.content {
  padding: 1em;
  text-align: center;
}

header,
footer {
  position: fixed;
  width: 100%;
}

header {
  top: 0;
  background: #c2c2c2;
  height: 200px;
  z-index: -1;
}

footer {
  bottom: 0;
  background: #858585;
  height: 600px;
  z-index: -2;
}

.content {
  position: relative;
  z-index: 1;
  background: white;
  min-height: 600px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}

.wrapper-parallax {
  margin-top: 200px;
  margin-bottom: 600px;
}

Comments