Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 48
В Хроме 37.0.2062.94 не работают демки.
В последних FF/Safari — все ок.
В последних FF/Safari — все ок.
>Версия 37.0.2062.102 m
Всё работает
Всё работает
См. habrahabr.ru/post/235531/#comment_7929663 — у меня такая же хрень.
Хром 37.0.2062.94 mac os, тоже не работает
Глупый вопрос — А в чем подвох?
Не бывает же все так замечательно.
Не бывает же все так замечательно.
Chrome, OSX не работает.
Хороший пример: красивый сайт с эффектом паралакса — может, кто не в курсе, что это, как я…
у меня замечательно в 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 (вроде) и озвученных выше двух устройствах) =)
Заодно хочу заметить (небольшой оффтоп, раз уж пошла речь), что избыток всяких transition, transform, border-radius, rgba (особенно), box-shadow (ещё особенней), linear-gradient и проч. напрягает, подозреваю что любой мобильный девайс похлеще, нежели 10к+ строк JS кода (проверялось на iphone, ipad, galaxy tab 10.1 (вроде) и озвученных выше двух устройствах) =)
Ну вы загнули конечно, что в js ничего нет — взять хотя бы requestAnimationFrame.
И потом все от задачи зависит — в простых css, в сложных js.
И потом все от задачи зависит — в простых css, в сложных js.
И нет и да. Все зависит от того, будете ли вы использовать tarnsform, и будете ли вы использовать аппаратное ускорение, например сделав
А тормозят анимации иногда, как мне кажется, из-за ограничений видеопамяти или чего-то такого.
Вся проблема анимаций на JS — синхронизация рендеринга и чтения состояний. Кстати, проблема эта решена в velocity.js.
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
screencloud.net/v/260i
Опция debug в демке выглядит эффектно, обязательно попробуйте.
FF31: скроллинг тормозит, но эффект есть.
В дополнение: не работает в Опере 12.16 Linux.
(Предвосхищая предложения перейти на более новую версию, скажу, что 12 — последняя для Линукса.)
(Предвосхищая предложения перейти на более новую версию, скажу, что 12 — последняя для Линукса.)
На Мавериксе все отлично везде работает под все браузеры, какой айпад, какой линукс и мобильные гаджеты. Я уже молчу про андроид с режимом экономии. И про зоопарк браузеров с типо долфином.
Вы о чем? Давайте няшности и красивости оставлять дэсктопам, а адаптивка будет показывать контент юзеру в удобо читаемом виде. Версия попроще без ресурсоемких операций, пускай даже обрабатываемых аппаратно.
Спасибо большое за перевод, сегодня в офисе буду играться
Вы о чем? Давайте няшности и красивости оставлять дэсктопам, а адаптивка будет показывать контент юзеру в удобо читаемом виде. Версия попроще без ресурсоемких операций, пускай даже обрабатываемых аппаратно.
Спасибо большое за перевод, сегодня в офисе буду играться
Chrome M37 M38 под Mac OS X, не работает.
Причина — code.google.com/p/chromium/issues/detail?id=395258
Причина — code.google.com/p/chromium/issues/detail?id=395258
Возможно это некропостинг, но эта статья одна из первых в выдаче по запросу «паралакс».
Плохие новости, в IOS 13 паралакс на чистом был CSS сломан. Учитывайте это в своих проектах.
css-tricks.com/ios-13-broke-the-classic-pure-css-parallax-technique
Плохие новости, в IOS 13 паралакс на чистом был CSS сломан. Учитывайте это в своих проектах.
css-tricks.com/ios-13-broke-the-classic-pure-css-parallax-technique
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Параллакс на чистом CSS