Простейший параллакс jQuery не получается...
Всем привет!
Возник интересный вопрос: Допустим у нас есть большой блок с несколькими вложенными элементами
<div class="main">
<button class="btn">Кнопка</button>
<p>Какой-то текст</p>
<div class="sub">
<!--Всякие элементы блока-->
</div>
</div>
Скажем, у нас выполняется следующая jQuery функция:
$('.main').animate({marginLeft : 500}, 400);
Как сделать, чтобы вложенные в блок элементы сдвигались, скажем, не за 400, а за 500 мс, при этом родитель продолжал сдвигаться за 400 (своеобразный параллакс)? Может есть какая-то библиотека, или готовые решения в голове многоуважаемых разработчиков? Спасибо! ) |
<!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>
|
Так в этом случае вложенные элементы сместятся в итоге относительно родительского на 100px влево, нет?
|
Цитата:
http://jquery.page2page.ru/index.php...очереди поэтому не представляю как это можно сделать |
Придумал решение) Может кому понадобится.
Поставил библиотеку 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. |
| Часовой пояс GMT +3, время: 18:38. |