如何向单页网站添加更多部分

Question

我正在创建一个单页网站，它将包含 4 个部分。到目前为止，我只完成了第一部分。但我无法添加更多部分。我想要它，以便我可以向下滚动到下一部分。

      * {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

那里有多个 full-page 滚动插件。我建议使用其中之一来节省您的时间和精力。

其中两个（我认为最好的）是：

One Page Scroll

和

fullPage.js

两者都提供了一组不错的选项供您自定义。所以选择一个你更喜欢的，然后去做吧。

两者都有不错的文档。

如何向单页网站添加更多部分

How can I add more sections to one-page website

html

css

web

sections

onepage-scroll