Comments 37
Всегда было странно читать статьи про программирование без примеров кода, тем более там, где рассказывается как делать 'правильно'.
Сферические сравнения это хорошо, но в данном случае ниочём. Что с чем сравнивается — не понятно.
Сферические сравнения это хорошо, но в данном случае ниочём. Что с чем сравнивается — не понятно.
у вас монитор запотел
а у меня тормозит, MBA MC965
Выделяемые мышкой анимированные спрайты, на такого типа сайтах — это ужасно.
Ведь тут нечего по сути выделять.
Автор, добавили бы чтоли:
Ведь тут нечего по сути выделять.
Автор, добавили бы чтоли:
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
AMD x64 DualCore 4400+, 2Гб оперативки. Последний GoogleChrome, тормоза просто ужасны.
Так вот неужели для такой фиговины не хватает двух ядерного настольного ПК?
Так вот неужели для такой фиговины не хватает двух ядерного настольного ПК?
Какой смысл делать параллакс «очень и очень быстрым», если в конечном итоге вы всё равно пытаетесь заставить браузер перерисовывать картинки огромного размера которые весят до 800К? Для начала познакомтесь с чем-то наподобии tinypng.org
Хорошая идея, и я уже пробовал её применять.
Проблема в том, что на производительность влияет не вес картинки, а размер. Даже очень маловесящие картинки, растянутые на весь экран, заставляют браузер тратить огромные ресурсы на перерисовку.
Проблема в том, что на производительность влияет не вес картинки, а размер. Даже очень маловесящие картинки, растянутые на весь экран, заставляют браузер тратить огромные ресурсы на перерисовку.
В любом случае png-24 нужно перегонять в png-8. Ну и я бы в любом случае вставлял изображения в background, а размерами управляли бы background-size или медиа-запросы для 8 ослика.
В любом случае png-24 нужно перегонять в png-8
Тут я должен заметить, что png-24 — не моё единоличное решение.
Даже качество png-24 не всегда до конца устраивало нашу команду.
Тут все про тормоза пишут, мне даже стыдно спросить о другом: сколбара определенно не хватает. Без него непонятно, «в какую сторону едем», и как далеко до конца (а там, походу, много).
И еще бы управление не только через колесико мыши, но протяжкой и с клавиш клавиатуры добавить. Не у всех есть колесики (с тачпада смерть управлять таким слайдером!), да и все время вертикальное колесо крутить, чтобы горизонтально прокрутиться, как-то неинтуитивно получается.
И еще бы управление не только через колесико мыши, но протяжкой и с клавиш клавиатуры добавить. Не у всех есть колесики (с тачпада смерть управлять таким слайдером!), да и все время вертикальное колесо крутить, чтобы горизонтально прокрутиться, как-то неинтуитивно получается.
Для вашего удобства нахождение в полосе прокрутки отображается прогрессом заливки логотипа слева снизу :-)
А управление клавиатурными стрелочками есть! Извините, что не дали об этой возможности наглядно узнать.
А управление клавиатурными стрелочками есть! Извините, что не дали об этой возможности наглядно узнать.
Черт, Вы бы не сказали, я бы ввек не догадался, что
а) заливка (!)
б) логотипа (!)
в) слева внизу (самое незаметно место, как по мне)
является индикатором положения на странице. JS у вас неплохой, но как по юзабилити, то есть еще над чем поработать.
Прокрутка, Вы правы, есть, но в первый раз она у меня не заработала. Правда, я кнопки «вверх» — «вниз» пытался нажимать, направление-то не указано :)
а) заливка (!)
б) логотипа (!)
в) слева внизу (самое незаметно место, как по мне)
является индикатором положения на странице. JS у вас неплохой, но как по юзабилити, то есть еще над чем поработать.
Прокрутка, Вы правы, есть, но в первый раз она у меня не заработала. Правда, я кнопки «вверх» — «вниз» пытался нажимать, направление-то не указано :)
хы. ага, отображается. а ничего, что вы отрубили анимации на время параллакса? то есть заливка логотипа обновляется с дикой задержкой после прокрутки ;)
Увы, тут — полностью моя вина.
Посылки:
— Не все браузеры поддерживают
— Побочные анимации, не сводящиеся к одному
Вывод:
Для некоторых браузеров приходится идти на компромисс и отсрочивать анимацию до того момента, когда пользователь закончит движение. Во время остановки же даже очень интенсивные вычисления — субъективно — не сильно скажутся на UI.
Посылки:
— Не все браузеры поддерживают
translate3d.— Побочные анимации, не сводящиеся к одному
translate3d, во время скольжения по странице ужасно убивают производительность.Вывод:
Для некоторых браузеров приходится идти на компромисс и отсрочивать анимацию до того момента, когда пользователь закончит движение. Во время остановки же даже очень интенсивные вычисления — субъективно — не сильно скажутся на UI.
На вашем сайте, у меня на машине IE10 всем браузерам утер нос.
Вернее так, это единственный браузер, где прокрута оказалась не тормозящей, в остальных мрак — тормоза.
(компьютер офисный)
Вернее так, это единственный браузер, где прокрута оказалась не тормозящей, в остальных мрак — тормоза.
(компьютер офисный)
Macbook Pro Retina, Safari, Firefox — глючит очень сильно, Chrome — так себе
Core™ i7-2600, 8 гигов оперативы, Ubuntu 12.04, Chrome 25.0.1364.172
Надписи при скролле дергаются и разъезжаются. Даже не знаю, как объяснить. Представьте, что вы разделили надпись на 2 части посередине горизонтальной чертой. Так вот, нижняя часть надписи немного отстает от верхней в движении периодически.
Надписи при скролле дергаются и разъезжаются. Даже не знаю, как объяснить. Представьте, что вы разделили надпись на 2 части посередине горизонтальной чертой. Так вот, нижняя часть надписи немного отстает от верхней в движении периодически.
Заголовок: «Высокопроизводительный JavaScript-параллакс»
Половина комментариев, про то, как дико оно тормозит (у меня, собственно, такая же ситуация).
Автор, где обещанные 30fps?
Половина комментариев, про то, как дико оно тормозит (у меня, собственно, такая же ситуация).
Автор, где обещанные 30fps?
Кроме того, вы пишете в статье про translate3d, а сами все равно используете на странице position:absoulte + left.
Или вы сайт вашей студии привели в качестве отрицательного примера «Как не надо делать параллакс»?
Или вы сайт вашей студии привели в качестве отрицательного примера «Как не надо делать параллакс»?
Касательно
пустых серых прямоугольниковв timeline можно почитать тут.
Большое спасибо, я читал эту статью вчера, и после вашего упоминания решил прочесть еще раз, повнимательнее.
Она даёт ключ к пониманию того, почему у очень многих комментаторов производительность плачевна даже с
Она даёт ключ к пониманию того, почему у очень многих комментаторов производительность плачевна даже с
transform3d — не очень производительный GPU и большой размер экрана. Мне определенно стоит подумать над тем, как со своей стороны улучшить их UI в таких ограничивающих условиях.Sign up to leave a comment.
Высокопроизводительный JavaScript-параллакс