main.scss

@import url(https://fonts.googleapis.com/css?family=Montserrat);
// ------------- MIXINS ------------- //
@mixin transition($time, $property: all, $easing: ease-in) {
    transition: $property $time $easing;
}

// ------------- VARIABLES ------------- //
$parallax-offset: 30vh;
$content-offset: 40vh;
$transition-speed: 1.2s;
$slide-number: 3;
html,
body {
    overflow: hidden;
}

.background {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    overflow: hidden;
    will-change: transform;
    backface-visibility: hidden;
    height: 100vh + $parallax-offset;
    position: fixed;
    width: 100%;
    transform: translateY($parallax-offset);
    @include transition($transition-speed, all, cubic-bezier(0.22, 0.44, 0, 1));
    &:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, .3);
    }
    &:first-child {
        background-image: url(https://s8.postimg.org/lf2udl5np/4_Aihmii.jpg);
        transform: translateY(-$parallax-offset / 2);
        .content-wrapper {
            transform: translateY($parallax-offset /2);
        }
    }
    &:nth-child(2) {
        background-image: url(https://s8.postimg.org/ow4wgk4px/ugqti_Lg.jpg);
    }
    &:nth-child(3) {
        background-image: url(https://s8.postimg.org/grwsbtiat/x_ZMOBTj.jpg);
    }
}

/* Set stacking context of slides */

@for $i from 1 to ($slide-number + 1) {
    .background:nth-child(#{$i}) {
        z-index: ($slide-number + 1) - $i;
    }
}

.content {
    &-wrapper {
        height: 100vh;
        display: flex;
        justify-content: center;
        text-align: center;
        flex-flow: column nowrap;
        color: #fff;
        font-family: Montserrat;
        text-transform: uppercase;
        transform: translateY($content-offset);
        will-change: transform;
        backface-visibility: hidden;
        @include transition($transition-speed + .5, all, cubic-bezier(0.22, 0.44, 0, 1));
    }
    &-title {
        font-size: 12vh;
        line-height: 1.4;
    }
}

// ------------- SET TRANSFORM VALUES ------------- //
.background.up-scroll {
    transform: translate3d(0, -$parallax-offset / 2, 0);
    .content-wrapper {
        transform: translateY($parallax-offset / 2);
    }
    +.background {
        transform: translate3d(0, $parallax-offset, 0);
        .content-wrapper {
            transform: translateY($parallax-offset);
        }
    }
}

.background.down-scroll {
    transform: translate3d(0, -(100vh + $parallax-offset), 0);
    .content-wrapper {
        transform: translateY($content-offset);
    }
    +.background:not(.down-scroll) {
        transform: translate3d(0, -$parallax-offset / 2, 0);
        .content-wrapper {
            transform: translateY($parallax-offset / 2);
        }
    }
}