Могу ли я иметь div, у которого есть изображение параллакса, также показываю, что изображение параллакса прокручивается вверх - PullRequest
Новая
       27

Могу ли я иметь div, у которого есть изображение параллакса, также показываю, что изображение параллакса прокручивается вверх

0 голосов
/ 21 апреля 2020

Название вопроса может быть немного запутанным, поскольку я не уверен, как это правильно объяснить.

У меня есть пример видео с желаемым результатом: https://bcx-production-attachments-us-west-2.s3-us-west-2.amazonaws.com/99ccd694-7e7d-11ea-940f-a0369f08283c?AWSAccessKeyId=AKIAIXJK7HJ33HYQWMEQ&Expires=1587420147&Signature=zhLi2pKSDMHFWCcbtAZE7f5Gz5k%3D&response-content-disposition=inline%3B%20filename%3D%22Parallax%20Example.mp4%22%3B%20filename%2A%3DUTF-8%27%27Parallax%2520Example.mp4&response-content-type=video%2Fmp4

Мое понимание параллакса состоит в том, что изображение остается фиксированным, в то время как следующие элементы прокручивают его «мимо». В видео фоновое изображение выглядит как параллакс, поскольку контейнер «Прозрачная секция» прокручивает мимо него, как поведение параллакса. Но с другой стороны, само изображение прокручивается вверх под заголовком.

I ' Я играл и не могу достичь этого результата. Думая о том, как работает параллакс с привязкой к фону: исправлено, я не могу думать о том, как мне этого добиться. Мое изображение Parallax не прокручивается под заголовком, но остается на месте. Я только что до сих пор делал только css, не уверен, требуется ли Javascript.

Я ищу некоторое понимание, если это возможно и если да, то как бы мне было go получить этот вид.

ТАКЖЕ: заголовок остается неизменным до тех пор, пока не достигнет верхней части контейнера «Прозрачная секция», затем он прокручивается вместе с остальной частью стр. Изображение параллакса прокручивается с меньшей скоростью. Отдельные детали, если это имеет значение.

РЕДАКТИРОВАТЬ:

https://codepen.io/losttech/pen/wvKzYmX Вот код Из того, что у меня есть, я не могу прокрутить изображение параллакса вверх в заголовок, как в видео.

HTML: 

<div class="parallax-container">
  <div class="header-container">
    <header>
    <ul>
      <li>Menu 1</li>
      <li>Menu 3</li>
      <li>Menu 3</li>
    </ul>
  </header>
  </div>
  <div class="parallax-img-container">
    <div class="blurb">
      Transparent Section
    </div>
  </div>
</div>
<div class="body-content">
  <h2>Rest of the body content here...</h2>
</div>

CSS: 

.parallax-container {
  height: 730px;
  position: relative;
}

.header-container {
  height: 550px;
  position: absolute;
  width: 100%;
  z-index: 99999;
}

header {
  width: 100%;
  background: grey;
  height: 80px;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
}

ul {
  display: flex;
  li {
    list-style: none;
    margin-right: 1rem;
  }
}

.parallax-img-container {
  height: 650px;
  background-image: url(https://wallpaperaccess.com//full/83991.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
}

.blurb {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
  background: rgba(0,0,0,0.6);
  color: white;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.body-content {
  height: 500px;
}

1 Ответ

0 голосов
/ 21 апреля 2020

Да, для этого типа параллакса требуется немного javascript. Что вам нужно сделать, это захватить событие прокрутки и изменить фоновую позицию на основе доли того, как далеко прокрутил пользователь.

Вот как я делал это раньше: 

const el = document.getElementsByClassName("parallax-img-container")[0];
window.addEventListener("scroll", () => {
  let offset = window.pageYOffset;
  //0.5 can be whatever you want it will adjust how far / fast the image appears to scroll
  el.style.backgroundPositionY = `${offset * 0.5}px`;
});

edit:

Я усовершенствовал селектор el, чтобы получить класс из вашего html, и удалил свойство css background-attachment: fixed, поскольку оно не используется в этой другой технике параллакса.

См. Это в действии: https://codepen.io/jguitarz/pen/WNQGYQB

...