Открыть список
Как стать автором
Обновить

Комментарии 48

В Хроме 37.0.2062.94 не работают демки.
В последних FF/Safari — все ок.
>Версия 37.0.2062.102 m
Всё работает
Хром 37.0.2062.94 mac os, тоже не работает
Глупый вопрос — А в чем подвох?
Не бывает же все так замечательно.
НЛО прилетело и опубликовало эту надпись здесь
Chrome, OSX не работает.
image
Кстати, пример из статьи работает в Safari, но сильно грузит процессор — не круто.
У меня не грузит процессор в сафари
Все чисто и спокойно
Хром. Грузит заметно.
НЛО прилетело и опубликовало эту надпись здесь
у меня замечательно в chrome 37.0.2062.94 на os x 10.9.4
Хочу заметить, что зачастую JS быстрее и менее ресурсоёмок, нежели CSS3. Особо ощущается на мобильных телефонах.
Как раз-таки наоборот. Css3-трансформации работают как будто это нативное приложение, для них есть аппаратная поддержка, а для Js-анимаций ничего нет, оно просто работает как есть.
Sony Ericsson Xperia Neo — простая анимация позиции (left) влево-вправо на JS работает в разы быстрее, нежели на CSS3 animations, в тоже время Google Nexus (какой-то, циферку не назову) — показывает прямо противоположные результаты. Моё дело предупредить о том, что бы не считали CSS3 панацеей от всех бед.

Заодно хочу заметить (небольшой оффтоп, раз уж пошла речь), что избыток всяких transition, transform, border-radius, rgba (особенно), box-shadow (ещё особенней), linear-gradient и проч. напрягает, подозреваю что любой мобильный девайс похлеще, нежели 10к+ строк JS кода (проверялось на iphone, ipad, galaxy tab 10.1 (вроде) и озвученных выше двух устройствах) =)
на iOS девайсах, например, отслеживать изменения скролла сложнее, тк пока палец прижат к экрану, скрипты висят, CSS не вызывает таких проблем, работает отлично
Ну вы загнули конечно, что в js ничего нет — взять хотя бы requestAnimationFrame.
И потом все от задачи зависит — в простых css, в сложных js.
И нет и да. Все зависит от того, будете ли вы использовать tarnsform, и будете ли вы использовать аппаратное ускорение, например сделав translateZ(0).
А тормозят анимации иногда, как мне кажется, из-за ограничений видеопамяти или чего-то такого.
Вся проблема анимаций на JS — синхронизация рендеринга и чтения состояний. Кстати, проблема эта решена в velocity.js.
Здесь немного подробней про производительность анимации при помощи только стилей и с помощью скриптов.
Если коротко, многое зависит от скорости фреймворка (если он используется) и способа анимирования скриптом.
Вот такое сравнение есть, например.
Согласен. Сталкивался с, как оказалось, известной проблемой когда на IOS девайсах «падает» браузер из-за CCS анимации (transition). Пришлось все на JS переписывать.
НЛО прилетело и опубликовало эту надпись здесь
У меня тоже win8, хром, тестировал не в «metro», все отлично скролится, кликать не нужно — скрол идет по скролу, а не по клику. Текст на слое foreground и base выделяется, не выделяется текст на бекграунде, но как я понимаю там должна быть картинка.
НЛО прилетело и опубликовало эту надпись здесь
Могу предположить, что это из-за аппаратного ускорения. У нас на работе была почти паника с 36 хромом под виндовс, когда большие по размеру картинки, уменьшенные с помощью css и выровненные по центру блока, находящиеся в блоке со скоролом, при скролинги вызывали моргание и пропадания всего со страницы. Причём с той же версией под линукс было всё норм. С выходом 37 — всё вернулось на свои места.
Может быть дело в версии хрома? У меня стоит 39.0.2138.3 (64-bit).

На моем компе без фокуса скролится, открываю страницу — кручу колесико мышки и все работает.
На айпеде работает в режиме реального времени, то есть во время скроллинга, чего не добиться жс параллаксом. Это оч круто!
Однако перестала работать инерционная система промотки.
жс можно добиться почти всего
Нет, на джаваскрипте на iOS невозможно заставить репейнтить после того, как пользователь отпустил экран, и система продолжает иннерционно доскраливать. Если считаете, что можно, то пруфы в студию.
onTouchStart + onTouchEnd + requestAnimationFrame на webkitTransform
На жс можно свою кинетическую прокрутку сделать как в картах гугла и яндекса.
И тогда будет контроль над ререндером и рефлоу.
Да, можно, но это велосипед со всеми вытекающими оттуда последствиями. Как минимум почти невозможно, чтоб скроллинг вел себя так же хорошо, как нативный, к тому же фпс будет не фонтан. Это ок в картах, но ставить такое на роль скроллера страницы я бы не стал. А сабж таки при системном скроллинге работает.
А если зажать центральную кнопку мыши и потянуть вбок, будет вот такой забавный эффект:
screencloud.net/v/260i
Опция debug в демке выглядит эффектно, обязательно попробуйте.
Огромное спасибо за кнопку дебаг, наконец-то понял как работает паралакс)
FF31: скроллинг тормозит, но эффект есть.
Ах, тормозит только последнее, с группами.
В дополнение: не работает в Опере 12.16 Linux.

(Предвосхищая предложения перейти на более новую версию, скажу, что 12 — последняя для Линукса.)
Для Windows ситуация не сильно лучше — 12.17 последняя Опера. Дальше уже она Блинк или Хром или как там… А многие пользователи принципиально не хотят переходить на новую версию.
Вы серьезно решили объяснить «проблему» Opera? Здесь, на Хабре? ;)
Или это тонкая ирония какая-то?
Оу, эту тему я пропустила. Спасибо!
На Мавериксе все отлично везде работает под все браузеры, какой айпад, какой линукс и мобильные гаджеты. Я уже молчу про андроид с режимом экономии. И про зоопарк браузеров с типо долфином.
Вы о чем? Давайте няшности и красивости оставлять дэсктопам, а адаптивка будет показывать контент юзеру в удобо читаемом виде. Версия попроще без ресурсоемких операций, пускай даже обрабатываемых аппаратно.

Спасибо большое за перевод, сегодня в офисе буду играться
P.S. Возможно обусловлено разрешением Retina, уже встречал два бага в Chrome, которые проявляются только на Retina.
Говорят в iOS 14 починили. Кто-нибудь проверял?
Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.