Задать вопрос

Как избавиться от тормозов JavaScript анимации?

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

Итак, я поставил перед собой задачу сделать анимацию перелистывания страниц при скроллинге похожую на этом сайте. Вроде ни чего сложно. По сценарию анимации так и есть. Но когда я взялся за дело, получилась страница тормозящая до ужаса. Прочитав статьи, которые выдавал гугл, я пришел к выводу, что jQuery (метод animate) анимация не самая шустрая и лучше писать на чистом JavaScript. Был вариант использовать CSS Transition, но тут тоже возникли некоторые проблемы, поэтому я остановился на JS и решил использовать старый, добрый setInterval. В этом архиве исходник - результат моего творчества. в файле js/functions.js находятся методы отвечающие за анимацию.

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

P.S. Когда будете скролить страницу, не делайте пожалуйста большую прокрутку колесиком , а лишь на одну позицию. Это еще не доработано. Заранее благодарю всех, кто присоединится к беседе=)
  • Вопрос задан
  • 4472 просмотра
Подписаться 7 Оценить Комментировать
Решения вопроса 2
TekVanDo
@TekVanDo
Javascript Developer
Для анимаций использую TweenMax работает очень быстро. имеет приятный синтаксис и отличные инструменты (один timeline чего стоит )
Ответ написан
Комментировать
enovot
@enovot Автор вопроса
Итак. Всем большое спасибо за участие! Решение проблемы я выбрал следующие. Как советовал TekVanDo использую Tween анимацию. Она оказалось очень удобной. Метод TweenMax.fromTo решил некоторые мои проблемы. На страницах помимо анимации скроллинга есть другая анимация (слайдер и т п). Я сделал разделение анимации по блокам. Т. е. анимация в определенном блоке запускается только тогда, когда пользователь до него доходит.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
Уточните, пожалуйста, какие именно проблемы у Вас возникли при использовании css3 анимации?
Не сказал бы, что сайт прямо-таки тупит, есть местами некоторая неплавность, это да. Текст в основном как-то дергается:
gif.gif?_subject_uid=225229511&w=AACFtnL
По моему лучшим вариантом является использование css анимации, а логику (переключение классов и свойств) делать на jquery (или на чистом js, если знания позволяют).
Ответ написан
Комментировать
mlnkv
@mlnkv
JavaScript Developer
Анимируйте css-сом
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы