Устранение неполадок при работе jQuery.Parallax и jQuery.Skrollr работают в гармонии. (Перебор фоновых изображений при прокрутке окна.)

Я кодирую визуальную часть сайта и наткнулся на загадку. Я пытаюсь сохранить его в основном CSS для большей совместимости, но я хочу использовать jQuery: главным образом, когда пользователь прокручивает окно, следовательно, Parallax и Skrollr.

Как вы знаете, Parallax позволяет, помимо прочего, прокручивать фон со скоростью относительно скорости прокрутки самого окна. Это производит и эффект трехмерных самолетов. Вот почему я использую Parallax: для прокрутки определенных фонов, как если бы они были физически позади основного контента.

Скроллер работает для запуска определенных анимаций в определенных точках положения прокрутки окна.

Я использую оба вместе, чтобы иметь анимированный фон, который анимируется, когда пользователь прокручивает окно и, в то же время, прокручивает со скоростью относительно скорости прокрутки окна. Возможно, эта анимация поможет проиллюстрировать это более понятным способом:

Параллакс и Скроллр работают вместе в гармонии

Как вы можете видеть, когда пользователь прокручивает главное окно, содержимое (верхнее окно) прокручивается как обычно. Тем не менее, группа фонов (Bgs 1, 2 и 3) также прокручивается, но медленнее (это работает Параллакс). Хотя вы не можете заметить "медленную скорость" в этой анимации, вы должны заметить, что одновременно, когда они движутся в унисон, их показы block в noneсначала один, затем другой, затем другой и т. д. и обратно, образуя цикл, который анимирует все эти фоны, пока пользователь продолжает прокручивать (это работает Skrollr).

Все идет нормально. У меня есть один из этих наборов фонов в верхней части страницы, и все идет хорошо. Однако далеко вниз у меня проблемы со вторым набором фонов. Этот второй набор отображается, как показано ниже: вместо того, чтобы находиться один над другим, отдельные фоновые слои background-position, который всегда должен начинаться с 0, опускается примерно на 200 пикселей. Изображение должно показать проблему очень четко.

вопрос

Как вы можете видеть, эти два фона (Bgs 2 и 3) должны появляться один над другим. Тем не менее, один явно сбит с толку, как и остальные отдельные слои bg, которые находятся сверху. Только первый или нижний слой отображается так, как должен.

HTML-коды для обоих наборов практически идентичны (единственное отличие состоит в том, что набор 1 us внутри общего DIV-пакета, в то время как набор 2 такой же, как и внутри <body>:

HTML SET 1

<div id="head_wrapper">
  <div class="background_head bg1_1"></div>
  <div class="background_head bg1_2" data-0="display: none;"  data-50="display: block;" data-400="display: none;" data-450="display: block;" data-800="display: none;"></div>
  <div class="background_head bg1_3" data-0="display: none;" data-100="display: block;" data-350="display: none;" data-500="display: block;" data-750="display: none;"></div>
  <div class="background_head bg1_4" data-0="display: none;" data-150="display: block;" data-300="display: none;" data-550="display: block;" data-700="display: none;"></div>
  <div class="background_head bg1_5" data-0="display: none;" data-200="display: block;" data-250="display: none;" data-600="display: block;" data-650="display: none;"></div>
</div>

HTML SET 2

CSS для каждого набора выглядит следующим образом:

CSS SET 1

#top_wrapper {
  width: 100%;
  min-width: 1000px;
  position: relative;
  overflow: hidden;
}
#head_wrapper {
  position: relative;
  margin: 0 auto;
  width: 1133px;
  height: 733px;
}
.background_head {
  background-position: 50% 0;
  background-repeat: no-repeat;
  width: 1133px;
  height: 733px;
  position: absolute;
  top: 0;
  left: 0;
}
.bg1_1 {
  background-image: url(../img/bgs/bg1_1.jpg);
  z-index: 11;
}
.bg1_2 {
   background-image: url(../img/bgs/bg1_2.jpg);
   z-index: 12;
}
.bg1_3 {
   background-image: url(../img/bgs/bg1_3.jpg);
   z-index: 13;
}
.bg1_4 {
  background-image: url(../img/bgs/bg1_4.jpg);
  z-index: 14;
}
.bg1_5 {
  background-image: url(../img/bgs/bg1_5.jpg);
  z-index: 15;
}

CSS SET 2

.background_wrapper {
  position: relative;
  width: 1133px;
  height: 400px;
  margin: 0 auto;
}
.background_content {
  background-position: 50% 0;
  background-repeat: no-repeat;
  width: 1133px;
  height: 400px;
  position: absolute;
  top: 0;
  left: 0;
}
.bg2_1 {
  background-image: url(../img/bgs/bg2_1.jpg);
  z-index: 21;
}
.bg2_2 {
  background-image: url(../img/bgs/bg2_2.jpg);
  z-index: 22;
}
.bg2_3 {
  background-image: url(../img/bgs/bg2_3.jpg);
  z-index: 23;
}
.bg2_4 {
  background-image: url(../img/bgs/bg2_4.jpg);
  z-index: 24;
}
.bg2_5 {
  background-image: url(../img/bgs/bg2_5.jpg);
  z-index: 25;
}

И, наконец, это jQuery, который связывает Parallax и Skrollr со всеми этими хорошими вещами:

JQUERY SETS 1 и 2

skrollr.init({
  forceHeight: false,
  smoothScrolling: true
});

$(document).ready(function(){
  $('.bg1_1').parallax("50%", -0.75);
  $('.bg1_2').parallax("50%", -0.75);
  $('.bg1_3').parallax("50%", -0.75);
  $('.bg1_4').parallax("50%", -0.75);
  $('.bg1_5').parallax("50%", -0.75);
  $('.bg2_1').parallax("50%", -0.3);
  $('.bg2_2').parallax("50%", -0.3);
  $('.bg2_3').parallax("50%", -0.3);
  $('.bg2_4').parallax("50%", -0.3);
  $('.bg2_5').parallax("50%", -0.3);
})

Я верю, что это все, что я могу тебе показать. Надеюсь, это достаточно ясно. Я исследовал все сегодня и не могу найти ссылки на эти два плагина jQuery, которые используются вместе. Черт возьми, у Skrollr нет документации, по крайней мере, я не знаю, поэтому трудно понять, как она работает, не разбирая сам код. В любом случае, вот почему я спрашиваю здесь, потому что, очевидно, никто не сталкивался с этой проблемой... возможно, эти два плагина не совместимы... Я бы подумал, что сначала, но потому, что один из моих наборов фона работает хорошо, я думаю, что проблема в том, что я скучаю по всем вещам, которые я только что оставил здесь, чтобы вы, ребята, проверили и помогли мне, или... я не знаю: что-то еще.

В любом случае, любая помощь от вас, ребята, будет очень цениться!

Источник

1 ответ

Я не вижу ваш HTML-код для SET 2. Я чувствую себя глупо, прося вас включить его, поскольку вы потратили на его создание на 500% больше времени, чем большинство, но не могли бы вы добавить его в качестве меры? Мне также любопытно, если встроенные стили добавляются к фону набора 2?

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

Источник
Другие вопросы по тегам