Функция параллакса разбивает мое изображение на две вертикальные половины - PullRequest
Новая
       7

Функция параллакса разбивает мое изображение на две вертикальные половины

0 голосов
/ 13 ноября 2018

Я столкнулся с безумной проблемой: мой эффект параллакса сходит с ума.

Когда у меня нет фонового повтора, я получаю пробел около 200 пикселей над изображением, если фоновый повтор включен, мое изображение повторяется в этом месте выше.

Я не знаю, как еще это объяснить.
Когда я обновляю страницу, изображение находится на своем месте, но как только происходит событие прокрутки, изображение отскакивает вниз и имеет дополнительное пространство сверху.

Я пробовал разные вещи с CSS и JQuery, но безрезультатно. Надеюсь, у одного из вас, экспертов, есть ответ на этот беспорядок.

У меня есть Codepen на https://codepen.io/eghoff/pen/MzbLBo, но он не покажет обновление, как я объяснил.

Для этого вы можете пойти сюда: https://agilewebsitedesigns.co.uk/indexHome.html

Спасибо за любую помощь. 

$(window).scroll(function() {

  parallax();

});

function parallax() {

  var wScroll = $(window).scrollTop();

  $('.parallax--bg').css('background-position', 'center ' + (wScroll * 0.250) + 'px');

  $('.parallax--box').css('top', -5 + (wScroll * 0.0125) + 'em');
}
.sliderContainer {
  background-color: white;
  background-image: url("../images/001-homepage-images/slider.jpg");
  height: 800px;
  background-position: center;
  background-size: cover;
  width: 80%;
  margin: 0 auto;
  padding: 0;
}

.parallax--bg,
.parallax--box {
  transition: initial;
}

.parallax-curtain {
  height: 650px;
  padding-top: 125px;
  background: rgba(255, 255, 255, 0.0);
}

.pTextContainer {
  width: 100%;
  height: 400px;
  background: transparent;
  text-align: center;
}

.pText h3 {
  font-size: 2em;
  color: white;
  margin: 0 auto;
  padding-top: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <div class="sliderContainer parallax--bg">
    <div class="parallax-curtain">
      <div class="pTextContainer">
        <div class="pText">
          <h3>Knowing when you need help is a big thing</h3>
          <h3>Finding the right help can be a daunting task</h3>
          <h3>I am here to help you</h3>
        </div>
      </div>
    </div>
  </div>

</section>

1 Ответ

0 голосов
/ 13 ноября 2018

Ваше изображение смещено от верхней части страницы примерно на 1000px, то есть к тому времени, когда вы фактически прокрутите его, значение scrollTop() будет 1000px. Ваш расчет приводит к background-position из center 250px. 250px - это пробел, который вы видите.

Чтобы учесть это, вы можете сделать что-то вроде offset().top - scrollTop(). Это гарантирует, что к моменту прокрутки к изображению background-position будет примерно center 0px. 

function parallax() {
  var $parallaxBg = $('.parallax--bg');
  var wScroll = $(window).scrollTop();
  var wOffset = $parallaxBg.offset().top;
  var wBackgroundPos = (wScroll-wOffset) * 0.250;

  $parallaxBg.css('background-position', 'center ' + wBackgroundPos + 'px');
  $('.parallax--box').css('top', -5 + (wScroll * 0.0125) + 'em');
}

Вот обновленная версия вашего кода .

...