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};
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.