Как добиться прокрутки параллакса, когда сайт действует как последовательность слайдов друг на друга? - PullRequest
Новая
       7

Как добиться прокрутки параллакса, когда сайт действует как последовательность слайдов друг на друга?

0 голосов
/ 27 июня 2018 

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 поверх другого, он застревает, и я не могу прокрутить вниз.

...