Как добавить дополнительные разделы на одностраничный сайт

Question

Я создаю сайт на одну страницу, у него будет 4 раздела. Пока у меня есть только первый раздел. Но у меня возникли проблемы с добавлением дополнительных разделов. Я хочу, чтобы я мог перейти к следующему разделу.

Вот сайт: http://al-saba.net/

 * {margin: 0; padding: 0;} 
 
     * {overflow: hidden;} 
 

 
     body { 
 
     font-family: Calibri, sans-serif; 
 
     } 
 

 
     .background-wrap { 
 
     position: fixed; 
 
     z-index: -1000; 
 
     width: 100%; 
 
     height: 100%; 
 
     overflow: hidden; 
 
     top: 0; 
 
     left: 0; 
 
     } 
 
     
 
     #video-bg-elem { 
 
     position: absolute; 
 
     object-fit: cover; 
 
     width: 100%; 
 
     height: 100%; 
 
     } 
 

 
     .background-wrap { 
 
     position: fixed; 
 
     z-index: -1000; 
 
     width: 100%; 
 
     height: 100%; 
 
     overflow: hidden; 
 
     top: 0; 
 
     left: 0; 
 
     } 
 
     
 
     #video-bg-elem { 
 
     position: absolute; 
 
     top: 0; 
 
     left: 0; 
 
     min-height: 100%; 
 
     min-width: 100%; 
 
     } 
 

 
     .home { 
 
     position: absolute; 
 
     width: 100%; 
 
     min-height: 100%; 
 
     z-index: 1000; 
 
     background-color: rgba(0,0,0,0.2); 
 
     } 
 

 
     .home h1 { 
 
     text-align: center; 
 
     font-size: 80px; 
 
     text-transform: uppercase; 
 
     font-weight: 300; 
 
     color: #fff; 
 
     padding-top: 3.5%; 
 
     margin-bottom: 10px; 
 
     } 
 

 
     .home p { 
 
     text-align: center; 
 
     font-size: 20px; 
 
     letter-spacing: 3px; 
 
     color: #DADADA; 
 
     } 
 

 
     .home img { 
 
     margin-top: 10px; 
 
     margin-left: 38px; 
 
     } 
 

 
     .about { 
 
     width: 100%; 
 
     height: 1000px; 
 
     } 
 

 
     .brightness {-webkit-filter: brightness(0.9); filter: brightness(0.9);} 
 

 
@-webkit-keyframes bounce { 
 
    0%, 20%, 50%, 80%, 100% { 
 
    -webkit-transform: translateY(0); 
 
    transform: translateX(0); 
 
    } 
 
    40% { 
 
    -webkit-transform: translateY(-30px); 
 
    transform: translateY(-30px); 
 
    } 
 
    60% { 
 
    -webkit-transform: translateY(-15px); 
 
    transform: translateY(-15px); 
 
    } 
 
} 
 

 
@-moz-keyframes bounce { 
 
    0%, 20%, 50%, 80%, 100% { 
 
    transform: translateY(0); 
 
    } 
 
    40% { 
 
    transform: translateY(-30px); 
 
    } 
 
    60% { 
 
    transform: translateY(-15px); 
 
    } 
 
} 
 

 
@keyframes bounce { 
 
    0%, 20%, 50%, 80%, 100% { 
 
    -ms-transform: translateY(0); 
 
    transform: translateY(0); 
 
    } 
 
    40% { 
 
    -ms-transform: translateY(-30px); 
 
    transform: translateY(-30px); 
 
    } 
 
    60% { 
 
    -ms-transform: translateY(-15px); 
 
    transform: translateY(-15px); 
 
    } 
 
} 
 

 
     .arrow { 
 
     position: fixed; 
 
     bottom: 9px; 
 
     left: 50%; 
 
     margin-left:-20px; 
 
     width: 40px; 
 
     height: 40px; 
 
     background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=); 
 
     background-size: contain; 
 
     -webkit-filter: brightness(0.7); filter: brightness(0.7); 
 
     z-index: 1001; 
 
     } 
 

 
     .arrow:hover { 
 
     -webkit-filter: brightness(0.9); filter: brightness(0.9); 
 
     cursor: pointer; 
 
     } 
 

 
     .bounce { 
 
     -webkit-animation: bounce 2s infinite; 
 
     animation: bounce 2s infinite; 
 
     } 
 

 

 
     .center-wrap1 { 
 
     position: absolute; 
 
     top: calc(45% - 100px); 
 
     left: -4px; 
 
     width: 250px; 
 
     height: 200px; 
 
     } 
 

 
     .center-wrap2 { 
 
     position: absolute; 
 
     top: calc(57% - 100px); 
 
     left: -4px; 
 
     width: 250px; 
 
     height: 200px; 
 
     } 
 

 
     .center-wrap3 { 
 
     position: absolute; 
 
     top: calc(69% - 100px); 
 
     left: -4px; 
 
     width: 250px; 
 
     height: 200px; 
 
     } 
 

 
     .center-wrap4 { 
 
     position: absolute; 
 
     top: calc(81% - 100px); 
 
     left: -4px; 
 
     width: 250px; 
 
     height: 200px; 
 
     } 
 

 
     .button { 
 
     position: relative; 
 
     display: block; 
 
     background: none center center no-repeat; 
 
     background-size: cover; 
 
     border: 2px solid rgba(0,0,90,0.0); 
 
     text-transform: uppercase; 
 
     letter-spacing: .3rem; 
 
     padding: 20px 15px; 
 
     text-align: center; 
 
     max-width: 270px; 
 
     min-width: 200px; 
 
     cursor: pointer; 
 
     overflow: hidden; 
 
     -webkit-transition: border 1s cubic-bezier(0.19,1,.22,1),color .6s cubic-bezier(0.19,1,.22,1); 
 
     transition: border 1s cubic-bezier(0.19,1,.22,1), color .6s cubic-bezier(0.19,1,.22,1), background 5s cubic-bezier(0.19,1,.22,1); 
 
     } 
 

 
     .button a { 
 
     color: #aaa; 
 
     font-family: 'Varela Round'; 
 
     text-decoration: none; 
 
     } 
 

 
     .button .mask { 
 
     background: #fff; 
 
     background: rgba(255,255,255,0.5); 
 
     } 
 

 
     .button .mask { 
 
     position: absolute; 
 
     display: block; 
 
     width: 200px; 
 
     height: 100px; 
 
     -webkit-transform: translate3d(-120%,-50px,0) rotate3d(0,0,1,45deg); 
 
     transform: translate3d(-120%,-50px,0) rotate3d(0,0,1,45deg); 
 
     -webkit-transition: all 1.1s cubic-bezier(0.19,1,.22,1); 
 
     transition: all 1.1s cubic-bezier(0.19,1,.22,1); 
 
     } 
 

 
     .button .shift { 
 
     -webkit-transition: all 1.1s cubic-bezier(0.19,1,.22,1); 
 
     transition: all 1.1s cubic-bezier(0.19,1,.22,1); 
 
     } 
 

 
     .button:hover { 
 
     border-color: #00008C; 
 
     /* box-shadow: 0 0 5px rgba(255,245,245,0.8); */ 
 
     /* background-image: url('http://cuinine.com/img/codepen/savvy.jpg'); */ 
 
     } 
 

 
     .button:hover a { 
 
     color: #fff; 
 
     } 
 

 
     .button:hover .mask { 
 
     background: #fff; 
 
     -webkit-transform: translate3d(120%,-100px,0) rotate3d(0,0,1,90deg); 
 
     transform: translate3d(120%,-100px,0) rotate3d(0,0,1,90deg); 
 
     } 
 

 
     .button:hover .shift { 
 
     padding-left: 5px; 
 
     }

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 

 
    <script src = "jquery-3.1.1.min.js"></script> 
 

 
    <script src = "script.js"></script> 
 

 
    <link rel = "stylesheet" href = "style.css"> 
 

 
    <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 

 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans|Passion+One|Source+Code+Pro|Varela+Round" rel="stylesheet"> 
 

 
    <link rel="icon" type="image/gif/png" href="logo.png"> 
 

 
    <title> AL-SABA </title> 
 

 
</head> 
 

 
<body> 
 

 
<header> 
 

 
    <div class = "home"> 
 

 
     <img class = "brightness" src = "logo.png"/> 
 

 
     <h1> AL-SABA </h1> 
 
     <p> Design • Code • Programs </p> 
 
          
 
    <div class = "center-wrap1"> 
 
     <div class = "button"> 
 
     <a href = "#"> Home <span class = "shift"></span></a> 
 
    <div class = "mask"></div> </div> </div> 
 

 
    <div class = "center-wrap2"> 
 
     <div class = "button"> 
 
     <a href = "#"> About <span class = "shift"></span></a> 
 
    <div class = "mask"></div> </div> </div> 
 

 
    <div class = "center-wrap3"> 
 
     <div class = "button"> 
 
     <a href = "#"> Projects <span class = "shift"></span></a> 
 
    <div class="mask"></div> </div> </div> 
 

 
    <div class = "center-wrap4"> 
 
     <div class = "button"> 
 
     <a href = "#"> Contact <span class = "shift"></span></a> 
 
    <div class = "mask"></div> </div> </div> 
 

 
    </div> 
 

 
</header> 
 

 
    <div class = "background-wrap"> 
 
     <video id = "video-bg-elem" preload = "auto" autoplay = "true" loop = "loop" muted = "muted"> 
 
     <source src = "coding.mp4" type = "video/mp4"> 
 
     Video not supported 
 
     </video>   
 
    </div> 
 

 
    <div class = "arrow bounce"> 
 
    </div> 
 

 
</body> 
 

 
</html>

Answer 1

Есть несколько плагин полностраничных прокруток там. И я предлагаю использовать один из них, чтобы сэкономить вам время и силы.

Два из которых (и я думаю, что лучше там), являются:

One Page Scroll

и

fullPage.js

Оба обеспечивают хороший набор опций для Вас для их настройки. Поэтому выберите тот, который вам больше понравился, и подойдите к нему.

Оба имеют достойную документацию.