Sassy Parallax Banner - 3d effect - solved

Hi,

I was struggling with lesson:
https://www.codecademy.com/courses/learn-sass/projects/parallax-banner
as the parallax effect didn’t work as it should work, which means there was no 3d effect between background image and the heading on 1st and 3rd section in this project.

I used concept from:

to make a properelly working 3d parallax effect with the codecademy project files and content.
So I completely rebuilded html code and scss as follow:

HTML:

<head>
	<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>

  <div class="parallax">
    <!-- START .parallax__section #section1 -->
    <div class="parallax__section" id="section1">
      <div class="parallax__layer parallax__layer--background">
      </div>
      <div class="parallax__layer parallax__layer--heading">
        <h1 class="title">Visit Myanmar</h1>
      </div>
    </div><!-- END /.parallax__section #section1 -->
    <!-- START .parallax__section #section2 -->
    <div class="parallax__section" id="section2">
      <div class="parallax__layer parallax__layer--background"></div>
      <div class="parallax__layer parallax__layer--content">
        <p>
          Descriptions to come. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer consectetur, libero eget bibendum elementum, lorem orci rutrum justo, at fermentum neque felis ac ex. Phasellus suscipit dapibus ante, eu sodales risus sagittis ut. Phasellus eget augue purus. Sed eget auctor felis, egestas vestibulum augue. Aenean pharetra metus quis orci consequat dapibus. Integer aliquam aliquet ipsum ut pellentesque. Curabitur cursus, nibh ut vehicula maximus, eros libero pretium diam, eu luctus nisl mauris a augue. Nulla luctus in orci non vulputate. Suspendisse at tortor elit.
        </p>
      </div>
    </div><!-- END /.parallax__section #section2 -->
    <!-- START .parallax__section #section3 -->
    <div class="parallax__section" id="section3">
      <div class="parallax__layer parallax__layer--background">
      </div>
      <div class="parallax__layer parallax__layer--heading">
        <h1 class="title">Book my trip now</h1>
      </div>
    </div><!-- /.parallax__section #section3 -->
  </div><!-- /.parallax -->
</body>

And SCSS code:

// Variables:

  $parallax-height: 100vh;
  $center-margin: 0px auto;

// Mixins:

@mixin background-size($size) {
  background-size: $size;
  -webkit-background-size: $size;
  -moz-background-size: $size;
  -o-background-size: $size;
}

@mixin parallax-background($file) {
  background: url(#{$file}.JPG) center;
  @include background-size(cover);
}


// Actuall SCSS:

* {
  margin: 0;
  padding: 0;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: Roboto;
  color: #2e3738;
}

.parallax {
  width: 100%;
  height: $parallax-height;
  perspective: 2px;
  overflow-x: hidden;
  overflow-y: auto;
  perspective-origin-x: 100%;
  .parallax__section {
    position: relative;
    height: $parallax-height;
    transform-style: preserve-3d;
    transform-origin-x: 100%;
    .parallax__layer {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      &.parallax__layer--heading {
        /* transform: translateZ(0) scale(-1); */
      }
      &.parallax__layer--background {
        width: 100vw;
      }
      &.parallax__layer--content {
        p {
          width: 70%;
          padding: 5%;
          margin: 0px auto;
          text-align: center;
          font-size: 20px;
          font-weight: 200;
          line-height: 1.4;
        }
      }
      .title {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-transform: uppercase;
        font-family: 'Bitter', serif;
        letter-spacing: 0.06em;
        font-size: 60px;
        color: #FFF;
        opacity: 0.7;
        text-align: center;
      }
    }
    &#section1 {
      z-index: 2;
      .parallax__layer--background {
        @include parallax-background(landscape);
        transform: translateZ(-1px) scale(2);
      }
      .parallax__layer--heading {
        transform: translateZ(0.5px) scale(0.75);
      }
    }
    &#section2 {
      z-index: 4;
      .parallax__layer--background {
        background-color: #fff;
      }
    }
    &#section3 {
      z-index: 3;
      .parallax__layer--background {
        @include parallax-background(monkeys);
        transform: translateZ(0) scale(1);
      }
      .parallax__layer--heading {
        transform: translateZ(0.5px) scale(0.75);
      }
    }
  }
}




Or compiled SCSS code to CSS:

* {
  margin: 0;
  padding: 0;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: Roboto;
  color: #2e3738;
}

.parallax {
  width: 100%;
  height: 100vh;
  perspective: 2px;
  overflow-x: hidden;
  overflow-y: auto;
  perspective-origin-x: 100%;
}

.parallax .parallax__section {
  position: relative;
  height: 100vh;
  transform-style: preserve-3d;
  transform-origin-x: 100%;
}

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

.parallax .parallax__section .parallax__layer.parallax__layer--heading {
  /* transform: translateZ(0) scale(-1); */
}

.parallax .parallax__section .parallax__layer.parallax__layer--background {
  width: 100vw;
}

.parallax .parallax__section .parallax__layer.parallax__layer--content p {
  width: 70%;
  padding: 5%;
  margin: 0px auto;
  text-align: center;
  font-size: 20px;
  font-weight: 200;
  line-height: 1.4;
}

.parallax .parallax__section .parallax__layer .title {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-transform: uppercase;
  font-family: 'Bitter', serif;
  letter-spacing: 0.06em;
  font-size: 60px;
  color: #FFF;
  opacity: 0.7;
  text-align: center;
}

.parallax .parallax__section#section1 {
  z-index: 2;
}

.parallax .parallax__section#section1 .parallax__layer--background {
  background: url(landscape.JPG) center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  transform: translateZ(-1px) scale(2);
}

.parallax .parallax__section#section1 .parallax__layer--heading {
  transform: translateZ(0.5px) scale(0.75);
}

.parallax .parallax__section#section2 {
  z-index: 4;
}

.parallax .parallax__section#section2 .parallax__layer--background {
  background-color: #fff;
}

.parallax .parallax__section#section3 {
  z-index: 3;
}

.parallax .parallax__section#section3 .parallax__layer--background {
  background: url(monkeys.JPG) center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  transform: translateZ(0) scale(1);
}

.parallax .parallax__section#section3 .parallax__layer--heading {
  transform: translateZ(0.5px) scale(0.75);
}

I share the code because I know that many people had a problem with this project lesson and final result which did not bring the intended effect.

Tell me what you think.