h1{position: fixed; left:0; top: 0; font-size: 100px;}
body{width: 100%; height: 22000px;}
.nav{position: fixed;
    left: 50px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
}
.nav li{position: relative;
    margin: 5px; width: 100px;
    padding: 20px 0 0 3px;}
.nav li span{position: absolute;
    display: block; width: 27px;
    height: 25px;
    background: coral;
    transform: skew(-15deg);
    left: 0;top: 0;
    transition: all .5s;
    z-index: -1;
    cursor: pointer;
}

.nav li:hover span{width: 100px;}
.nav li.on span{width: 100px;}


section{position: fixed;
width: 1200px;
height: 700px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: rgb(134, 125, 118);
perspective: 2300px
}
article{width: 1200px;
    height: 700px;
    position: absolute;
    left: 0; top: 0; font-size: 100px;
    text-align: center;
    line-height: 700px
}

section article:nth-child(1){transform: translateZ(0px)}
section article:nth-child(2){transform: translateZ(-5000px)}
section article:nth-child(3){transform: translateZ(-10000px)}
section article:nth-child(4){transform: translateZ(-15000px)}
section article:nth-child(5){transform: translateZ(-20000px)}

section p {position: absolute;}

section article:nth-child(1) p{left: 40%; top: 40%;}
section article:nth-child(2) p{left: 50%; top: 20%;}
section article:nth-child(3) p{left: 60%; top: 5%;}
section article:nth-child(4) p{left: 10%; top: 30%;}
section article:nth-child(5) p{left: 5%; top: 5%;}