div.g-container
    - for(var i=0; i<10; i++)
        div.g-section CSS Parallax
View Compiled
$length: 10;

@function randomNum($max, $min: 0, $u: 1) {
	@return ($min + random($max)) * $u;
}

body {
    background: #000;
    font-family: "lato", lucida grande,lucida sans unicode,lucida,helvetica,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
}

.g-container {
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    overflow: scroll;
    transform-style: preserve-3d;
    perspective: 10px;
    // mix-blend-mode: lighten;
    filter: blur(5px) contrast(5px);
}

.g-section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    text-align: center;
    line-height: 100vh;
    padding: 50vh 0;
    font-size: 15vh;
}

@for $i from 1 through $length {
    .g-section:nth-child(#{$i}) {
        transform: translateZ(-#{$i}px) scale(#{$i * 0.1 + 1 });
        $hue : $i * 35deg;
        color : hsla($hue, 100%, 60%, .8);
        // text-shadow: 0px 0px 1px hsla($hue, 100%, 60%, .9);
        z-index: #{$i};
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.