Возможное решение проблемы: цветовую маркировку нанести на неподвижную часть, и чтобы по этой неподвижной шкале бегал указатель

Наверное, больше не стоит лезть в душ с телефоном (не водонепроницаемым!) ради интерфейсных заметок

(только сейчас подумал, что там я в отражении так-то. Повезло вам, что оделся перед тем, как сделать фото)

Тут веб-версия книжечки подъехала: https://kefiijrw.com/hypochondria/.

По теме этого канала, наверное, тут можно только поделиться ощущением неистовой задротской оптимизации, чтобы всё выглядело относительно качественно, весило не очень много, не тормозило особо и правильно открывалось на любых устройствах (на больших экранах, конечно же, смотрится эпичней).

Это кусок странички, отвечающий за одну картинку. Всего 13 версий файлов под разные устройства, пропорции экранов, разрешения экранов, поддерживаемые браузером форматы изображений.

А это как выглядят накладываемые поверх статичных изображений гифки, чтобы всё весило как можно меньше:
https://kefiijrw.com/hypochondria/imgs/anim/20.gif
https://kefiijrw.com/hypochondria/imgs/anim/10.gif
(извините, что ссылками, но я помню, чем закончилась моя прошлая попытку кинуть сюда гифку)

Это я нагенерил тридцать вариантов картинки с разными параметрами качества и сравниваю разницу с идеальным пнг, чтобы найти наиболее плавное отображение градиента

А это я смотрю разницу между кадрами анимации, чтобы оставить только отличающиеся пиксели

Вообще много красоты повидал, пока копался в оптимизации картинок для публикации. Еще в январе рассказывал про чудесную вселенную багов и глитчей, которую я бережно складываю в папочку (https://news.1rj.ru/str/meow_design/195).

Надеюсь, не разрушил ощущение магии от ознакомпления с книгой, показав происходящие под капотом веб-версии штуки. Привет Маше, читающей канал, отличные картинки вышли и анимашки супер!

Ах да, совсем забыл рассказать про главную магию. В титрах веб-версии полноценным соавтором числится фотошоповский Content-Aware, и это не преувеличение: его вклад в книжку не меньше нашего с Машей.

Дело в том, что для печатной книжки у нас были готовы иллюстрации в портретной ориентации, а большинство экранов, за исключением смарфтонов, очень явно вытянуты по горизонтали, и непонятно, как вставлять вертикальные картинки в горизонтальный экран без чувства лажи. Если расстягивать на весь экран по ширине, то одна картинка займет четыре экрана скрола, и ощущение, будто разговариваешь с человеком с расстояния 2 сантиметра: видно все прыщи и морщины, а лица в общем не видишь. Просто впихивать картинку по высоте экрана с пустотами по бокам тоже уныло, поэтому мы приняли решение удлинить картинки по бокам. Но Маше троекратно дорисовывать уже законченные по композиции картинки было бы утомительно и долго, поэтому силы Маши были направлены на анимация, я расстягивание картинок было доверено расширяющему фотошоповском кропу с галочкой content-aware. Так и получились чудеса, отсутствующие в печатной версии книжки. Потом мы этим же способом растянули иллюстрации по вертикали, чтобы создать бесшовные переходы градиентом и обойти этот унылый формат с парадом чередующихся прямоугольников картинок и абзацев текста.

Было

Стало

Было

Стало

Было