<div id = "app-container">
<div class = "homepage">
    <section class = "section-1">
      <div class = "all">
        <div class = "image-background image-left" style = "background-image : url(http://lh6.googleusercontent.com/-kwOtS3z-CWk/U0GUxLeYzaI/AAAAAAAAJzw/ESiY2pa29wg/s2400/sfondo-wallpaper-natura-paesaggi-1366-768-%20%28136%29.jpg)">
        </div>
        <div class = "image-background image-center translate-onscroll" style = "background-image : url(http://lh5.googleusercontent.com/-6mQ_Rgsis24/Ux3nf2hIQ9I/AAAAAAAABac/1WttfAi5TzA/s1920/sfondo-wallpaper-spazio-universo-0003.jpg)">
        </div>
        <div class = "image-background image-right-bottom translate-onscroll" style = "background-image : url(http://www.boorp.com/sfondi_gratis_desktop_pc/sfondi_gratis/sfondi_new_ipad_3_hd/sfondi_hd_ipad3_strage.jpg)">
      </div>
      <div id = "text-right-el" class = "text-right-el translate-onscroll">
        <h2 class = "title"> Awesome title</h2>
          <div class = "line-wrap">
            <div class = "line-red">
            </div>  
          </div>
          <div class = "container-text">
            <p class = "text" id = "text-p-right-el" , > Very, very, very, very, very long description</p>
          </div>
          <div class = "btn-wrap">
            <div class = "btn btn-red">
              <span class = "btn-hover btn-hover-red">
                <span class = "btn-text"> text btn </span>    
            </div>
          </div>  
        </div>  
        </div>
    </section>
</div>
</div>

$green-button: #1e8029;

@mixin basicBackgroundImageSelector {
  position: absolute;
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
}

#app-container {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 1;
  .homepage {
    width: 100%;
    margin: 0;
    padding: 0;
    height: 100%;
  }
  section {
    height: 100%;
    .all {
      height: 100%;
      position: relative;
      .image-background {
        @include basicBackgroundImageSelector;
        &.image-left {
          top: 0;
          left: 0;
          width: 57.29vw;
          height: 180vh;
          transform: translateZ(0);
        }
        &.image-center {
          top: 30%;
          left: 10.1vw;
          width: 36.875vw;
          height: 25vw;
        }
        &.image-right-bottom {
          top: 76%;
          left: 28.33vw;
          width: 33.33vw;
          height: 17.5vw;
        }
      }
    }
    .text-right-el {
      position: absolute;
      top: 34.16%;
      right: 10%;
      width: 24vw;
    }
    .text-center {
      position: absolute;
      top: 54.16%;
      right: 30%;
      left: 30%;
      .title {
        margin: 0;
        text-align: left;
      }
      .text {
        text-align: left;
      }
    }
    .text-left {
      position: absolute;
      top: 84%;
      left: 20%;
      width: 20.83vw;
      .title {
        margin: 0;
      }
    }
    .title {
      margin: 0 0 0 -13.17vw;
      font-size: 4.16666vw;
      font-family: raisonne;
    }
    .line-wrap {
      position: relative;
      margin: 1.98vw 0 0;
      width: 2.6vw;
      height: 2px;
      overflow: hidden;
      .line-red {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: $green-button;
      }
    }
    p.text {
      margin: 2.29vw 0 0;
      font-size: 1.2rem;
      letter-spacing: -0.05em;
      line-height: 170%;
      font-family: akkuratStd;
    }
    .btn-wrap {
      position: relative;
      margin: 2.083vw 0 0;
      overflow: hidden;
      width: 11rem;
      height: 3rem;
      line-height: 2.6rem;
      cursor: pointer;
      .btn-red {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        text-align: center;
        border: 2px solid $green-button;
        &:hover {
          .btn-hover:after,
          .btn-hover:before {
            transform: translateZ(0);
          }
        }
        span.btn-hover {
          position: absolute;
          top: 1px;
          left: 1px;
          bottom: 1px;
          right: 1px;
          transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
          overflow: hidden;
          pointer-events: none;
          &:after,
          &:before {
            content: "";
            position: absolute;
            top: -2px;
            bottom: 0;
            left: 0;
            right: 0;
            background: $green-button;
            transition: transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
            opacity: 1;
          }
          &:before {
            transform: translate3d(-100%, 0, 0);
            opacity: 0;
          }
          &:after {
            transform: translate3d(100%, 0, 0);
          }
        }
        span.btn-text {
          position: relative;
          transition: all 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
          font-family: raisonne;
          font-size: 1.5rem;
          letter-spacing: 0.07em;
          pointer-events: none;
          z-index : 2;
          display: flex;
          align-content: center;
          align-items: center;
          justify-content: center;
          height: 100%;
        }
      }
    }
  }
}

$( document ).ready(function() {
$('#app-container').on('scroll', function() {
            var st;
            var lastScrollTop;
            st = $(this).scrollTop();
            $('.translate-onscroll').css({
                transform: `translate3d(0px, -${st / 6}px, 0px)`
            });
            lastScrollTop = st;
        });
});