Question

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

div{
  height: 100vh;
  width: 100vw;
  position: absolute;
}

.first{
  background-color: blue;
}

.second{
  background-color: green;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <meta name="description" content="Test">
    <meta name="author" content="Test">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
  </head>

  <body>
    <div class="rellax first">
      <div class="grey darken-2 valign-wrapper" style="height:100vh; width:100vw;">
        <div class="container">
            <h3 class="white-text">Lorem ipsum dolor sit amet</h3>
        </div>
      </div>
    </div>

    <div class="rellax second" data-rellax-speed="-7">
      <div class="green valign-wrapper row" style="height:100vh;">
        <h3 class="white-text">Lorem ipsum dolor sit amet</h3>
      </div>
    </div>
  </body>

  <!-- initialize rellax parallax scrolling -->
  <script src="rellax.js"></script>
  <script type="text/javascript">
    var rellax = new Rellax('.rellax');
  </script>
</html>

我一直在尝试创建一个类似于Micrsoft Fluent Design的网站，但到目前为止无法获得我想要的效果。我正在使用rellax.js进行视差滚动（他们在他们的github上提到了Microsoft流利的设计使用了他们的库），但是我无法通过滚动使div相互定位。一旦将div放置在另一个div上，它就会卡住并且无法向下滚动。

您如何实现视差滚动，使网站像幻灯片一样相互叠加？

0 个答案: