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

Когда у меня нет повторения фона, я получаю белое пространство около 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
rocknriter 13 Ноя 2018 в 03:43

1 ответ

Лучший ответ

Ваше изображение смещено от верхней части страницы примерно на 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');
}

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

0
Tyler Roper 13 Ноя 2018 в 03:23