Wie kann ich der One-Page-Website weitere Abschnitte hinzufügen?

Question

Ich erstelle eine einseitige Website, die vier Abschnitte umfasst. Bisher habe ich nur den ersten Abschnitt fertiggestellt. Aber ich habe Probleme, weitere Abschnitte hinzuzufügen. Ich möchte es, damit ich zum nächsten Abschnitt scrollen kann. Hier

ist die Website: 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

Es gibt mehrere ganzseitige Scroll-Plugins gibt. Und ich schlage vor, einen von ihnen zu verwenden, um Ihnen die Zeit und die Bemühung zu sparen.

Zwei davon (und ich denke, das Beste da draußen) sind:

One Page Scroll

und

fullPage.js

Sowohl eine schöne Reihe von Optionen für Sie zur Verfügung stellen um sie mit anzupassen. Wählen Sie also das, was Ihnen besser gefallen hat und gehen Sie danach.

Beide haben anständige Dokumentationen.