librown
@librown
На-все-руки-мастер и немного кодер

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

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

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

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

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

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

Текущая реализация: turnado.net/ua/sevastopol/industrial.tour
  • Вопрос задан
  • 6315 просмотров
Решения вопроса 2
Pumko_adm
@Pumko_adm
Всего помаленьку
wagerfield.github.io/parallax попробуй, там есть все
Ответ написан
Комментировать
TekVanDo
@TekVanDo
Javascript Developer
Плавную анимацию на js не сделать, используйте библиотеку для использования css3 анимаций например(ricostacruz.com/jquery.transit)
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
Anonym
@Anonym
Программирую немного )
Вот пример. Довольно плавно, как мне кажется. jsfiddle.net/6FeHh
Ответ написан
Комментировать
@dllstar
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы