бэкграунд-позишн анимэйт

Короче может кто че сможет посоветовать, как реализовать плавное бэкграунд-позишн
у меня оно происходило с жуткими тормозами :((
Ссылка примера

11 комментариев

  • аватар a022
  • 0
У меня без тормозов, но как-то резко (одновременно с курсором), нужно запаздывание делать — будет по приятнее.
ну в примере то да это и есть мой пример в котором не плавно
а надо именно плавно, при маленьких изображениях у меня всё нормально было
но с большим че та ужасное
  • аватар ololo
  • 0
С большим ужасное потому, что браузеру требуются серьёзные ресурсы не столько на меремещение массивного изображения, сколько на постоянную перерисовку всей страницы, пока перемещается курсор. Покажи свой пример, может, там можно что-то оптимизировать.
дак выше ссылка это вот и есть мой пример
т.е. это то что я делал
  • аватар ololo
  • 0
Я вижу, что там всё приемлемо, на мой взгляд. Количество элементов на странице оптимально. Серьёзного поля для оптимизации нет, если только уменьшать фоновое изображение, но, как я понял, по условиям макета это невозможно.

Если переписать это на чистом js, то вряд ли разница будет заметна невооружённым взглядом. Советую для отладки использовать хромовский (или в сафари) профайлер, там хорошо видно, что затыки возникают при перерисовке, а не исполнении самого кода.
  • аватар tau
  • 0
а что если разрезать картинку на меньшие блоки и двигать их одновременно. не будет ли браузер перерисовывать плавнее в таком случае?
количество кусков подобрать тестами.
  • аватар ololo
  • 0
Нужно экпериментировать. Я могу предположить, что это только усугубит ситуацию
или может кто пример встречал подобного,
был бы очень рад увидеть
  • аватар tau
  • 0
а ты делаешь с помощью jquery? (ломает код ковырять)
я да, да мне впринципе пофик будет там чистый джаскрипт или фреймворк заюзан просто посмотреть как люди делают подобное
  • аватар ololo
  • +1
Деревео DOM должно быть как можно меньше, нужно убрать всё, от чего только можно отказаться. Элементы, в свою очередь, должны обладать минимальным набором свойств css. Это главное направление для оптимизации такого рода эффектов на веб-странице. Тени, прозрачность и другие ресурсоёмкие свойства лучше не использовать.

Если сделать страницу минималистичной не представится возможным, то нужно широко тестировать, т.к. на одной машине всё может быть прекрасно, а на другой могут возникнуть существенное падение производительности либо браузер попросту зависнет. Объективное тестирование нужно проводить на компьютерах не только с разными браузерами и операцуионными системами, но и с разным объёмом ОЗУ и процессорами различной мощности.

Чтобы оставлять комментарии, нужно или зарегистрироваться.