时间戳

首页 > 解决方案 > 下面的空白视差效应

javascript - 下面的空白视差效应

问题描述

我在做我的第一个视差项目时遇到问题。所以我有 5 个部分，登陆页面中的英雄形象是 Parallax（使用可以在互联网上找到的 Rellax Javscript）：

<body>

<section id="home"> 
    <img src="media/images/Parallax/_Parallax_Layer_01.png" alt="Background">
    <img src="media/images/Parallax/_Parallax_Layer_02.png" alt="Middleground" class="middleground rellax" data-rellax-speed="2">
    <img src="media/images/Parallax/_Parallax_Layer_03.png" alt="Foreground" class="foreground rellax" data-rellax-speed="4">
</section>

<section id="about" class="rellax" data-rellax-speed="4">
......
</section>

<section id="vision" class="rellax" data-rellax-speed="2">
......
</section>

<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.11.0/rellax.min.js"></script>
<script src="test.js"></script>

</body>

这显示了 ABOUT 和 VISION 部分之间不需要的空白。

CSS：

section {
    width: 100%;
    height: 100vh;
    color: white;
}

#home img {
    position: absolute;
    width: 100%;
}

#about {
    background: #b6dff7;
    z-index: 5;
    display: flex;
}

#vision {
    background: orange;
}

Javascript：

  // Also can pass in optional settings block
  var rellax = new Rellax('.rellax', {
    speed: -2,
    center: false,
    wrapper: null,
    round: true,
    vertical: true,
    horizontal: false
  });

我也可以使所有内容都以相同的速度向上滚动页脚，但随后我将在页脚下方有一个巨大的空白区域。有人知道在这里做什么吗？

  // Also can pass in optional settings block
  var rellax = new Rellax('.rellax', {
    speed: -2,
    center: false,
    wrapper: null,
    round: true,
    vertical: true,
    horizontal: false
  });
/* Import needed Google fonts */

@import url('https://fonts.googleapis.com/css2?family=Amarante&family=Open+Sans&display=swap');

/* 
    font-family: 'Open Sans', sans-serif;
    font-family: 'Amarante', cursive;
    */

body {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  background: #b6dff7;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

section {
  width: 100%;
  height: 100vh;
  color: white;
}

#home img {
  position: absolute;
  width: 100%;
}

#home img .foreground {}

#about {
  background: #b6dff7;
  z-index: 5;
  display: flex;
}

.about-left {
  display: inherit;
  flex-direction: column;
  width: 50%;
  padding: 3em;
  background: #b6dff7;
  background: linear-gradient(180deg, rgba(182, 223, 247, 1) 0%, rgba(255, 255, 255, 1) 50%);
}

.about-left h1 {
  text-align: center;
}

.about-left .about-left-positioning {
  padding: 2em;
  display: inherit;
  flex-direction: column;
  justify-content: space-around;
}

.about-left .about-team img {
  padding: 2em 0;
  width: 75%;
  height: auto;
  position: relative;
  left: 50%;
  transform: translatex(-50%);
}

.about-left .about-team p {
  padding: 2em 0;
  color: black;
}

.about-right {
  padding: 3em;
  display: inherit;
  flex-direction: column;
  width: 50%;
  background: #b6dff7;
  background: linear-gradient(180deg, rgba(182, 223, 247, 1) 0%, rgba(255, 255, 255, 1) 50%);
}

.about-right h1 {
  text-align: center;
}

.about-right .about-right-positioning {
  padding: 2em 0;
  display: inherit;
  flex-direction: column;
  overflow-y: auto;
  align-items: center;
}

.about-right .about-right-positioning img {
  width: 75%;
  height: auto;
  padding: 2em;
}

#vision {
  background: orange;
}

#current-news {
  background: green;
}

#footer {
  height: 4vh;
  background: red;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vendari - Lost Lands Of Maneira</title>
  <link rel="stylesheet" href="test.css">
</head>

<body>

  <section id="home">
    <h1>This is where the images should be</h1>
  </section>

  <section id="about" class="rellax" data-rellax-speed="4">
    <div class="about-left">

    </div>
    <div class="about-right">

    </div>
  </section>

  <section id="vision" class="rellax" data-rellax-speed="2">
    <div class="vision">

    </div>
  </section>

  <section id="current-news" class="rellax" data-rellax-speed="0">
    <div class="news">

    </div>
  </section>

  <section id="footer">
    <small>Copyright &copy; Vendari</small>
    <div class="social-media">
      <i class="fab fa-facebook"></i>
      <i class="fab fa-twitter"></i>
      <i class="fab fa-instagram"></i>
      <i class="fab fa-github"></i>
    </div>
  </section>

  <!-- Scripts -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.11.0/rellax.min.js"></script>
  <script src="test.js"></script>
</body>

</html>

标签： javascripthtmlcssparallax

解决方案

尝试将 div 用于 rellax 类，并将部分仅用作包装器。

<section>
 <div id="vision" class="rellax" data-rellax-speed="2">
    <div class="vision"> </div>
  </div>
</section>

恭喜 Vendari Lost lands of Mainera ;-)

推荐阅读