Teste

_play.conf

{}

markup

<div class="parallax">
    <div class="parallax__layer parallax__layer--back">
        <div class="title">This is the background</div>
    </div>
    <div class="parallax__layer parallax__layer--base">
        <div class="title">This is the foreground</div>
    </div>
</div>

script

console.log('test');

style

.parallax {
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-perspective: 1px;
    perspective: 1px;
}

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

.parallax__layer--base {
    top: 30px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.parallax__layer--back {
    -webkit-transform: translateZ(-1px);
    transform: translateZ(-1px) scale(2);
}

/* add some padding to force scrollbars */
.parallax__layer {
    padding: 100vh 0;
}