Есть ли способ переместить картинку при прокрутке с параллаксом - PullRequest
Новая
       8

Есть ли способ переместить картинку при прокрутке с параллаксом

0 голосов
/ 13 декабря 2018

У меня есть некоторый код здесь для прокрутки параллакса, и я хотел спросить, есть ли какой-нибудь способ, которым я смог бы перемещать слои с разными скоростями (как в этой демонстрации ) при прокрутке с использованием CSS?Я попытался изменить transform: scale(1) на scale(1.1), но это оставляет эту причудливую белую линию в верхней части страницы.Я делаю что-то неправильно?Есть ли что-то еще, что я должен рассмотреть? 

html {
  font-family: sans-serif;
  color: black;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0%;
  margin: 0%;
  background-color: black;
}

body {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow: unset;
  padding: 0%;
  margin: 0%;
  background-image: black;
  /*padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
  overflow-x: scroll;
  padding-bottom: 17px;
  box-sizing: content-box;
}

#layer1 {
  height: 100%;
  /* The image used */
  background-image: url('**PLACEHOLDER**');
  /* Full height */
  height: 800px;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1);
}

#layer2 {
  /*border:2px solid black;
    border-radius: 5px;*/
  background-image: url("**PLACEHOLDER**");
  background-attachment: fixed;
  background-position: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 800px;
  align-content: center;
  transform: scale(1);
}

#layer3 {
  background-image: url("**PLACEHOLDER**");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 110%;
  height: 800px;
  align-content: center;
  transform: scale(1);
}
<div id="layer1"></div>
<div id="layer2"></div>
<div id="layer3"></div>

1 Ответ

0 голосов
/ 13 февраля 2019

Я нашел 1 решение, но это было не совсем то, что я искал.Я только что добавил строку заголовка, которая была заблокирована в верхней части страницы, однако мне бы хотелось иметь только изображение.

...