Параллакс в плагине Smooth Scrollbar - PullRequest
Новая
       28

Параллакс в плагине Smooth Scrollbar

0 голосов
/ 28 января 2020

Я учусь на стажировке и пытаюсь создать эффект параллакса, но также с помощью transform3d (), что-то очень похожее на этом веб-сайте . Я добавил Плагин Smooth Scrollbar с использованием HTML / CSS / JS, который работает отлично, но теперь мне нужно сделать этот небольшой эффект параллакса. Я пытался сначала объединить плагин с Rellax , но эти два не работают вместе. Затем я попытался закодировать эффект параллакса в CSS. 

<body>
<section id="my-scrollbar" data-scrollbar>
    <div class="parallax-container">
      <div class="background">
        <img class="background__image" src="./assets/hah.jpg"/> 
      </div>
      <div class="foreground">
          <img class="background__image" src="./assets/phonetwo.png"/>
      </div>
    </div>
  </section>
<script src="dist/smooth-scrollbar.js"></script>
<script> var Scrollbar = window.Scrollbar; Scrollbar.init(document.querySelector('#my-scrollbar'), {
dumping: 0.06,
thumbMinSize: 40,
renderByPixels: true,
continuousScrolling: true,
duration: 5});</script></body>

img {height: 500px}
#my-scrollbar {
    width: 100%;
    height: 100vh;
    overflow: auto;
  }
  ::-webkit-scrollbar {
      display: none;
  }
  .parallax-container {
    position: relative;
    overflow-x: hidden;
    overflow-y: scroll;
    perspective: 8px;
    perspective-origin: 0%;
    display: flex;
  }

  .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    transform: translateZ(0px);
  }

  .foreground {
    margin-top: auto;
    margin-bottom: 50px;

    transform-origin: 0;
    transform: translateZ(3px) scale(0.625);
  }

Ничто из этого не сработало так, как я хотел, но я также вижу, что если я проверяю веб-сайт , происходит преобразование: matrix3d ​​(). Поскольку я не так опытен с javacript / jQuery, только с фреймворком, таким как Vue. js, я не уверен, как создать такой код. Есть что-нибудь, что могло бы работать для этой проблемы?

...