Показать сообщение отдельно
  #5 (permalink)  
Старый 08.08.2015, 17:30
Аспирант
Отправить личное сообщение для pifon Посмотреть профиль Найти все сообщения от pifon
 
Регистрация: 17.07.2013
Сообщений: 46

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

Поставил библиотеку 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.

Последний раз редактировалось pifon, 08.08.2015 в 17:37.
Ответить с цитированием