Почему тормозит простой эффект «параллакса»?

Question

[Александр]

Приветствую!
Есть div фиксированных размеров. Фоном этого блока размещена фотография заведомо бОльших размеров. И отцентрирована: background-position: center center;

Хочу сделать анимацию сдвига фоновой фотографии по движению мышки над этим блоком. При подводе курсора к нижнему краю - фотография сдвигается вверх, показывая свою нижнюю часть и т. п. Желательно это сделать не с линейной анимацией, а с пропорциональным замедлением (чем ближе к краю подходит курсор).

Нагуглил пару решений - они все работают через анимацию backgorund-position X Y.
Это выглядит очень не плавно, рывками.

Сейчас на сайт https://cloud.mail.ru/ - увидел супер-плавную анимацию. (причем там еще и множество слоев)
Попытался разобраться, там используются "CSS3-свойства transform и transition". Никогда с ними дела не имел, пока не получается разобраться.

Может у кого есть на примете готовые решения? Или ссылки-примеры, для того чтобы ткнуть носом?
Буду признателен. Спасибо!

Текущая реализация: turnado.net/ua/sevastopol/industrial.tour

Comments

[Александр]

- текущая реализация.

$('#cover').bind('mousemove', function(e) {
      . . .
     $(this).stop().animate({'background-position-x': x+'%'}, 3000, "smoothmove");
});

Answer 1

[Руслан]

wagerfield.github.io/parallax попробуй, там есть все

Answer 2

[TekVanDo]

Плавную анимацию на js не сделать, используйте библиотеку для использования css3 анимаций например(ricostacruz.com/jquery.transit)

Answer 3

[Николай Васильчук]

Вот пример. Довольно плавно, как мне кажется. jsfiddle.net/6FeHh

Answer 4

[dllstar]

@librown
habrahabr.ru/post/158901