Как анимировать фон состоящий из 2ух картинок?

Question

[ligisayan]

Пытаюсь сделать parallax из двух фоновых картинок для первой секции (при фоне из 1 картинки все норм), но не знаю как их правильно анимировать, т.е. прописать позиционирование background-position сразу для 2ух частей фона, чтобы один на другой наслаивался и с разной скоростью скроллился.
Фидл

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section-1" id="container">
  Lets start!
</div>
<div class="container section-2">
  There is more cool stuff below...
</div>
<div class="container section-3">
  We are done with cool things!
</div>

var velocity = 0.5;

function update() {
  var pos = $(window).scrollTop();
  $('.container').each(function() {
    var $element = $(this);
    var height = $element.height() - 18;
    $(this).css('backgroundPosition', '50% ' + Math.round((height - pos) * velocity) + 'px');
  });
  $('#container').css('backgroundPosition', '50% ' + Math.round(($('#container').height() - pos) * velocity) + 'px' + '50% ' + Math.round(($('#container').height() - pos / 2) * velocity) + 'px');
};

$(window).bind('scroll', update);

.container,
#container {
  padding: 200px 20px 200px 20px;
  text-align: center;
  color: #FFF;
  font-weight: bold;
}

.section-1 {
  background: url(https://www.logaster.ru/blog/wp-content/uploads/2014/06/img_514.png), url(http://static4.wikia.nocookie.net/__cb20130612023354/harrypotter/images/d/d1/Gradient-blue-background.jpg);
  background-position: center, center;
}

.section-2 {
  background-image: url(http://th00.deviantart.net/fs49/PRE/f/2009/207/e/d/Orange_Desktop_Background_by_The_Dogfather.png);
  background-position: center;
}

.section-3 {
  background-image: url(http://oaklandbaptist.org/media/Green-Background.jpg);
  background-position: center;
}

Comments

[Манучехр Жалолов]

Вес проект в jsfiddle.net загрузите что бы легче было!

[ligisayan]

Манучехр Жалолов, да, конечно - вот

Answer 1

[lamer350]

Проще всего внедрить какой нибудь валидный параметр для div, например data-speed.
Тоисть в HTML ваш DIV выглядел бы так:

<div class="section-1" id="container" data-speed="1">

Это некий коэффициент, который вы можете регулировать как вам угодно, к примеру 0.5 если поставить - будет скролится в 2 раза медленнее, а если поставить 3 - будет скроллится в 2 раза быстрее.
Тогда js код будет выглядеть так:

function update() {
  var pos = $(window).scrollTop();
  $('.container').each(function() {
    var $element = $(this);
    var height = $element.height() - 18;
    var speed - $element.attr('data-speed');
    $(this).css('backgroundPosition', '50% ' + Math.round((height - pos*speed) * velocity) + 'px');
  });
  $('#container').css('backgroundPosition', '50% ' + Math.round(($('#container').height() - pos*speed) * velocity) + 'px' + '50% ' + Math.round(($('#container').height() - (pos*speed) / 2) * velocity) + 'px');
};

если кратко, чтобы легче было найти в чем отличии, вводите новую переменную speed и все pos умножаете на speed
И потом в HTML методом перебора коэффициентов добиваетесь нужного вам эффекта.

Comments

[ligisayan]

lamer350 по сути у меня velocity скоростью управляет. Мне бы в одной секции 2 картинки фона крутануть как-нить

[lamer350]

ligisayan, так как вы хотели все в background запихнуть - сделать не получится, как и общий цикл для всех блоков. Для блока с 2мя фонами нужно писать отдельную функцию.
За вас вряд ли кто то будет делать бесплатно все. Общий вектор выше описан, а ваша основная ошибка в следующем: .section-1 в стилях у вас background вместо background-image, из за этого не работает background-position, а сама первая картинка не имеет прозрачного фона, потому вы не можете наблюдать даже выходит у вас что то или нет.

[ligisayan]

lamer350, а ведь наслоить картинки в один фон можно только с помощью background, но не background-image? И еще: в скриптах все же можно задавать background-position для нескольких изображений или нет?

[lamer350]

ligisayan, сейчас можно и через background-image! в ИЕ 10 и ниже вряд ли будет работать, но в современных браузерах вполне себе рабочий вариант.
А в скриптах так же как и в css, задаете background-position: для первой картинки, для второй;

[ligisayan]

lamer350 хорощо, вот в первом экране 2 прозрачных фона, заданы через background-image - почему один перекрывает другой, а не проступает из него? jsfiddle.net/j4bts6wu/24

[lamer350]

ligisayan, вы просто не читали мой комментарий выше, который я писал 18 часов назад. Перечитайте его и вы все поймете.