Форум

pifon · #1 (**permalink**) 08.08.2015, 16:21

Всем привет!

Возник интересный вопрос:
Допустим у нас есть большой блок с несколькими вложенными элементами

<div class="main">
  <button class="btn">Кнопка</button>
  <p>Какой-то текст</p>
  <div class="sub">
    <!--Всякие элементы блока-->
  </div>
</div>

Скажем, у нас выполняется следующая jQuery функция:

$('.main').animate({marginLeft : 500}, 400);

Как сделать, чтобы вложенные в блок элементы сдвигались, скажем, не за 400, а за 500 мс, при этом родитель продолжал сдвигаться за 400 (своеобразный параллакс)?

Может есть какая-то библиотека, или готовые решения в голове многоуважаемых разработчиков?

Спасибо! )

EmperioAf · #2 (**permalink**) 08.08.2015, 16:33

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="">
<meta name="description" content="">
<title>ГГ</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<div class="main">
    Это гг
  <button class="btn">Кнопка</button>
  <p>Какой-то текст</p>
  <div class="sub">
    <!--Всякие элементы блока-->
  </div>
</div>
<script>
    $('.main').animate({marginLeft : 500}, 400);
    $('.main *').animate({marginLeft : 100}, 500);
</script>

</body>

</html>

pifon · #3 (**permalink**) 08.08.2015, 16:46

Так в этом случае вложенные элементы сместятся в итоге относительно родительского на 100px влево, нет?

EmperioAf · #4 (**permalink**) 08.08.2015, 17:13

Сообщение от pifon

Так в этом случае вложенные элементы сместятся в итоге относительно родительского на 100px влево, нет?

вы правы. Вообще говоря события складываются в очередь
http://jquery.page2page.ru/index.php...очереди
поэтому не представляю как это можно сделать

pifon · #5 (**permalink**) 08.08.2015, 17:30

Придумал решение) Может кому понадобится.

Поставил библиотеку jquery.transit.js (качать тут - https://github.com/rstacruz/jquery.Transit)

Позволяет через .animate() плавно управлять css3 свойством transform.

Далее вводим HTML атрибут data-parallax:

<div class="main">
  <button class="btn" data-parallax="100">Кнопка</button>
  <p>Какой-то текст</p>
  <div class="sub" data-parallax="150">
    <!--Всякие элементы блока-->
  </div>
</div>

И делаем параллельно такую штуку:

$('.main').animate({marginLeft : 500}, 400);

$('.main [data-parallax]').each(function() {
  var $t = $(this);
  $t.animate({
           x : $t.attr('data-parallax')+'px'
          }, 200, function() {
                      $t.animate({
                        x : 0
                      }, 400);
                    });
});

Для красоты можно будет использовать функции а-ля jquery.easing.js.

Форум

Справочник

Discord чат

Курсы javascript