WEB'S

[Parallax] Scroll Indicator

 /* reset */

 * {
     margin: 0;
     padding: 0
 }

 li,
 ul {
     list-style: none
 }

 a {
     text-decoration: none
 }

 .clearfix {
     *zoom: 1
 }

 .clearfix:before,
 .clearfix:after {
     display: block;
     content: '';
     line-height: 0;
 }

 .clearfix:after {
     clear: both;
 }

 body {
     font-family: 'Orbitron', sans-serif
 }

 /* nav */

 #nav {
     position: fixed;
     left: 0;
     top: 2px;
     width: 100%;
     height: 56px;
     text-align: center;
     transition: all 0.3s ease;
 }

 #nav li {
     float: left;
     width: 16.6666%;
 }

 #nav li a {
     display: block;
     background-color: rgba(255, 255, 255, 0.3);
     color: #fff;
     padding: 20px;
 }

 #nav li.active a {
     background-color: rgba(0, 0, 0, 0.5)
 }

 .scroll-line {
     height: 2px;
     background: red;
     width: 0%;
 }

 /* contents */

 #contents {
     text-align: center;
 }

 #contents > div {
     line-height: 100vh;
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
     color: #fff;
     font-size: 30px;
 }

 /* section */

 #section1 {
     background-image: url(https://tistory4.daumcdn.net/tistory/2141493/skin/images/bg02.jpg);
 }

 #section2 {
     background-image: url(https://tistory4.daumcdn.net/tistory/2141493/skin/images/bg01.jpg);
 }

 #section3 {
     background-image: url(https://tistory4.daumcdn.net/tistory/2141493/skin/images/bg03.jpg);
 }

 #section4 {
     background-image: url(https://tistory4.daumcdn.net/tistory/2141493/skin/images/bg04.jpg);
 }

 #section5 {
     background-image: url(https://tistory4.daumcdn.net/tistory/2141493/skin/images/bg05.jpg);
 }

 #section6 {
     background-image: url(https://tistory4.daumcdn.net/tistory/2141493/skin/images/bg06.jpg);
 }