如何将背景动画添加到完整的单滚动网站

Question

我正在尝试将背景动画添加到我的完整单滚动网站，但动画仅应用于第一个 page/index。有一个边界我无法摆脱。我希望气泡从页面的最底部开始，并允许我滚动浏览每个部分。我觉得我在 DIVS/Classes 的某个地方搞砸了，但是 Idk。我刚接触 WebDev 两周。

body, html {
  width: 100%;
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  background: #29b6f6;
}
.bubbles {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  top: 0;
  left: 0;
}
.bubble {
  position: absolute;
  bottom: -100px;
  width: 40px;
  height: 40px;
  background: #f1f1f1;
  border-radius: 50%;
  opacity: 0.5;
  animation: rise 10s infinite ease-in;
}
.bubble:nth-child(1) {
  width: 40px;
  height: 40px;
  left: 10%;
  animation-duration: 8s;
}
.bubble:nth-child(2) {
  width: 20px;
  height: 20px;
  left: 20%;
  animation-duration: 5s;
  animation-delay: 1s;
}
.bubble:nth-child(3) {
  width: 50px;
  height: 50px;
  left: 35%;
  animation-duration: 7s;
  animation-delay: 2s;
}
.bubble:nth-child(4) {
  width: 80px;
  height: 80px;
  left: 50%;
  animation-duration: 11s;
  animation-delay: 0s;
}
.bubble:nth-child(5) {
  width: 35px;
  height: 35px;
  left: 55%;
  animation-duration: 6s;
  animation-delay: 1s;
}
.bubble:nth-child(6) {
  width: 45px;
  height: 45px;
  left: 65%;
  animation-duration: 8s;
  animation-delay: 3s;
}
.bubble:nth-child(7) {
  width: 90px;
  height: 90px;
  left: 70%;
  animation-duration: 12s;
  animation-delay: 2s;
}
.bubble:nth-child(8) {
  width: 25px;
  height: 25px;
  left: 80%;
  animation-duration: 6s;
  animation-delay: 2s;
}
.bubble:nth-child(9) {
  width: 15px;
  height: 15px;
  left: 70%;
  animation-duration: 5s;
  animation-delay: 1s;
}
.bubble:nth-child(10) {
  width: 90px;
  height: 90px;
  left: 25%;
  animation-duration: 10s;
  animation-delay: 4s;
}
@keyframes rise {
  0% {
    bottom: -100px;
    transform: translateX(0);
  }
  50% {
    transform: translate(100px);
  }
  100% {
    bottom: 1080px;
    transform: translateX(-200px);
  }
}

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: "Chicle", cursive;
  scroll-behavior: smooth;
}

header {
  display: flex;
  width: 90%;
  margin: auto;
  align-items: center;
}

nav {
  flex: 2;
}

.logo {
  flex: 1;
  color: white;
  display: flex;
  font-family: "Chicle", cursive;
  margin: 0px 0px 0px 0px;
  background-size: 100%;
  font-size: 1rem;
}

.addbutton {
  flex: 1;
  justify-content: flex-end;
  display: flex;
}

.links {
  display: flex;
  justify-content: space-around;
  text-decoration: none;
  list-style: none;
  color: white;
  font-size: 29px;
}

a.links:hover {
  background-color: #29b6f6;
  color: black;
  cursor: pointer;
}

.presentation {
  display: flex;
  width: 90%;
  margin: auto;
  min-height: 80vh;
  align-items: center;
}

.photo img {
  height: 60vh;
  border-radius: 50%;
}

.photo {
  flex: 1;
}

.intro {
  flex: 1;
}

.introtext h1 {
  font-size: 60px;
  font-weight: 700;
  color: white;
}

.introtext p {
  margin-top: 5px;
  font-size: 22px;
  color: white;
  margin: 0px 0px 0px 76px;
}

.cta {
  padding: 50px 0px 0px 0px;
}

.add {
  background: #40e0d0;
  width: 150px;
  height: 50px;
  cursor: pointer;
  font-size: 16px;
  font-family: "Chicle", cursive;
  border: none;
  color: white;
  margin: 0px 0px 0px 175px;
}

.addbutton {
  padding: 10px 0px 0px 0px;
}

.click {
  background: #40e0d0;
  width: 150px;
  height: 50px;
  cursor: pointer;
  font-size: 16px;
  border: none;
  color: white;
  border-radius: 60%;
}

#Section3 {
  height: 700px;
  width: 100%;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="styles.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Chicle&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <header>
      <div class="logo">
        <h1 class="Name">Samuel Burrell</h1>
      </div>
      <nav>
        <ul class="links">
          <li><a class="links" href="#Section1">Who Am I</a></li>
          <li><a class="links" href="#Section2">Skills</a></li>
          <li><a class="links" href="#Section3">Contact</a></li>
        </ul>
      </nav>
      <div class="addbutton">
        <button class="click">Interview Me</button>
      </div>
    </header>
    <section class="sticky">
      <div class="bubbles">
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
      </div>
    </section>

    <main>
      <section class="presentation">
        <div class="intro">
          <div class="introtext">
            <h1>Your Team's Next Best Dev</h1>

            <p>Allow me to assist with your team's next project.</p>
          </div>
          <div class="cta">
            <button class="add">Book Me</button>
          </div>
        </div>
        <div class="photo">
          <img src="sam.PNG" alt="Sam" />
        </div>
      </section>
      <div id="Section1">
        <h1>This is About Me</h1>
      </div>
      <div id="Section2">
        <h1>These Are My Skills</h1>
      </div>
      <div id="Section3">
        <h1>This is My Contact Info</h1>
      </div>
    </main>
  </body>
</html>

Answer 1

希望您正在寻找这个。将您的 <main> div 放在 <body> 正下方并使其位置相对。

   <body>
         <main style="position: relative;">
        <header>
          <div class="logo">
            <h1 class="Name">Samuel Burrell</h1>
          </div>
          <nav>
            <ul class="links">
              <li><a class="links" href="#Section1">Who Am I</a></li>
              <li><a class="links" href="#Section2">Skills</a></li>
              <li><a class="links" href="#Section3">Contact</a></li>
            </ul>
          </nav>
          <div class="addbutton">
            <button class="click">Interview Me</button>
          </div>
        </header>
        
          <div class="bubbles">
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
          </div>
      
    
       
          <section class="presentation">
            <div class="intro">
              <div class="introtext">
                <h1>Your Team's Next Best Dev</h1>
    
                <p>Allow me to assist with your team's next project.</p>
              </div>
              <div class="cta">
                <button class="add">Book Me</button>
              </div>
            </div>
            <div class="photo">
              <img src="sam.PNG" alt="Sam" />
            </div>
          </section>
          <div id="Section1">
            <h1>This is About Me</h1>
          </div>
          <div id="Section2">
            <h1>These Are My Skills</h1>
          </div>
          <div id="Section3">
            <h1>This is My Contact Info</h1>
          </div>
        </main>
      </body>

如何将背景动画添加到完整的单滚动网站

How Do I Add Background Animation To a Full, Single Scroll Website

html

css

frontend

web-development-server

web-frontend