Help with parallax effect

Question

I'm trying to get an effect like piedpiper but I do not know how to do it. Here is the example of my page

Here is my code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>A grouped pure CSS parallax demo by Keith Clark</title>
<link rel="stylesheet" href="../demo.css">
<style>

  /* Parallax base styles
  --------------------------------------------- */

  .parallax {
    height: 500px; /* fallback for older browsers */
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-perspective: 300px;
    perspective: 300px;
  }

  .parallax__group {
    position: relative;
    height: 500px; /* fallback for older browsers */
    height: 100vh;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }

  .parallax__layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .parallax__layer--fore {
    -webkit-transform: translateZ(90px) scale(.7);
    transform: translateZ(90px) scale(.7);
    z-index: 1;
  }

  .parallax__layer--base {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    z-index: 4;
  }

  .parallax__layer--back {
    -webkit-transform: translateZY(-300px) scale(2);
    transform: translateZ(-300px) scale(2);
    z-index: 3;
  }





  /* demo styles
  --------------------------------------------- */

  body, html {
    overflow: hidden;
  }

  body {
    font: 100% / 1.5 Arial;
  }

  * {
    margin:0;
    padding:0;
  }

  .parallax {
    font-size: 200%;
  }

   /* centre the content in the parallax layers */
  .title {
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  div#content {
    width: 100%;
    border: 2px solid red;
    height: 250px;
    background: white;

  }







  /* style the groups
  --------------------------------------------- */

  #group1 {
    z-index: 5; /* slide over group 2 */
  }
  #group1 .parallax__layer--base {
    background: url('../imagenes/kamaleon.jpg') no-repeat;
    background-size:cover;
  }

  #group2 {
    z-index: 3; /* slide under groups 1 and 3 */
  }
  #group2 .parallax__layer--back {
    background: url('../imagenes/tecnologia.jpg')no-repeat;
     background-size:cover;
  }

  #group3 {
    z-index: 3; /* slide over group 2 and 4 */
  }
  #group3 .parallax__layer--base {
    background: url('../imagenes/quienes.jpg')no-repeat;
     background-size:cover;
  }

  #group4 {
    z-index: 1; /* slide under group 3 and 5 */

  }
  #group4 .parallax__layer--back{
  background: url('../imagenes/contacto.jpg')no-repeat;
     background-size:cover;
  }


</style>
</head>

<body>


  <div class="parallax">
    <div id="group1" class="parallax__group">
      <div class="parallax__layer parallax__layer--base">
        <div class="title">Base Layer</div>
      </div>
    </div>
    <div id="group2" class="parallax__group">
      <div class="parallax__layer parallax__layer--base">
        <div class="title">Base Layer</div>
      </div>
      <div class="parallax__layer parallax__layer--back">
        <div id="content" class="title">Background Layer</div>
      </div>
    </div>
    <div id="group3" class="parallax__group">
      <div class="parallax__layer parallax__layer--fore">
        <div id="content" class="title">Foreground Layer</div>
      </div>
      <div class="parallax__layer parallax__layer--base">
        <div class="title">Base Layer</div>
      </div>
    </div>
    <div id="group4" class="parallax__group">
      <div class="parallax__layer parallax__layer--base">
        <div class="title">Base Layer</div>
      </div>
      <div class="parallax__layer parallax__layer--back">
        <div id="content" class="title">Background Layer</div>
      </div>
     </div>
   </div>


</body>
</html>

Answer 1 · 2014-09-11T08:13:57Z

September 11, 2014 8:13am

Sadly your workspace / site example isn't displaying. This is a really open question with so many points to consider. I would recommend perhaps reading through and following some tutorials on how to achieve similar effects in a range of different ways as opposed to modifying a Keith Clarke's tutorial code and hoping for the best. Some further links that may help are: http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641 http://webdesign.tutsplus.com/tutorials/create-a-parallax-scrolling-website-using-stellarjs--webdesign-7307 http://webdesign.tutsplus.com/tutorials/jazz-up-a-static-webpage-with-subtle-parallax--webdesign-10195

The more you know, the better you'll be. Good luck.

Welcome to the Treehouse Community

Looking to learn something new?

Henry Remache

Henry Remache

Help with parallax effect

1 Answer

Shamus Griffin

Shamus Griffin