Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Henry Remache
Henry Remache
11,005 Points

Help with parallax effect

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>

1 Answer

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.