Как сделать многослойную Parallax иллюстрацию на CSS & JavaScript

[acupofspirt]

В хроме(51.0.2697.0 canary) при скролле мышкой коряво выглядит.

[dshster]

Интересно! Но может уже пора слазить с CoffeScript в угоду того же ES6, иначе уже как-то дико код выглядит? И, я так понимаю, ко всему этому прелоадер нужен будет, а то послойная загрузка картиное не очень красиво смотрится.

[Alexufo]

Меня смущает только одно, автор не видел, что размер его слоев по полтора мегабайта каждый?
Вроде бы давно не секрет, что нельзя большие картинки из фотошопа сохранять в png24 без последующего пережатия той же pandapng.
Берем https://s3-us-west-2.amazonaws.com/s.cdpn.io/272781/ilu_03.png
Итог: -80%!
Было 1.3 MB стало 256.2 KB. И вроде жить можно.

[FrozenInternet]

Да, да. Как-то уж больно долго демка картинки грузит.
Конкретно к автору. Уже после «Подготовим илюстрация» начали возникать вопросы. Вы хоть раз прочитали статью, если вы ее переводили? Такое ощущение, будто после google transtate-а ее ник-то не ревьюил.
Теперь по поводу статьи. Как я понял, статья рассчитана на новичков. Почему тогда coffescript, sass (хотя больше обычного css я тут не увидел) и тем более HAML? Странно это, учитывая то, что вначале статьи обещали «чистый css и js». :)

[meam]

Опечатки принято отправлять в личные сообщения. 2 часть это претензия к автору, для меня это тоже большой вопрос, но он обещал лишь чистый js без jQuery

[dbanet]

Всем и так известно, что опечатки принято отправлять в личных сообщениях.

Наверное, если FrozenInternet сообщил о них не в ЛС, а в комментариях, он хотел этим что-то сказать?

А, да нет, тут даже ни о чём думать надо: он прямым текстом сообщает вам:

Вы хоть раз прочитали статью, если вы ее переводили? Такое ощущение, будто после google transtate-а ее ник-то не ревьюил.

, что с вашей статьёй что-то сильно не так, и в таком виде ей тут не место.

По ощущениям, только херовые переводчики размахивают ссаными "опечатки-в-ЛС" и "это-не-ко-мне-это-к-автору". И публика жрёт всё: статьи всё равно в плюсе. Самоуправление работать перестало. Впрочем, той самой публики и так осталась десятая часть.

[dom1n1k]

ФШ жмет нормально, обычно после него дополнительные оптимизации без потери качества не превышают нескольких процентов. Если -80%, то это совершенно точно с потерей. Для картинки из примера 24-битный цвет, конечно, избыточен — но никто не мешает и в самом ФШ выбрать png8.

[Alexufo]

У photoshop нет возможности сохранять png8 с полутоновой маской как у png24, она у него битовая. А битовая маска прозрачности равносильна тому что прозрачности как таковой нет вообще — она бесполезна. png24 формат lossless — для веба кране неудобный при больших картинках — сами видите 1.3mb при 600px на 600px это капец. PNG panda делает png8 но с полутоновой маской прозрачности.
Что зачастую КУДА важнее, чем наличие truecolor.

[dom1n1k]

Офигеть, и правда.
Я всегда пользовался 32 битами + pngout, который переводит картинку в 8 бит, если это не ведет к потере качества, а иначе сохраняет 32.

[moldabekov]

Я вот пытаюсь нагуглить PNG panda, может тыкнете куда смотреть?

[SerafimArts]

https://tinypng.com/

[Psychosynthesis]

А без препроцессоров слабо?

[PavlovM]

Этот урок для начинающих, с начальным знанием JS и CSS
И тут же: HAML, SCSS, Coffeescript.

Все таки для начинающих нужно писать на чистом HTML, чистом CSS и чистом JS.
Тем более, код простой и никакой существенной выгоды от использования вышеперечисленного — нет.
Хотя, конечно, это скорее претензия к автору исходной статьи.

[yea]

Заново прогонять querySelectorAll при каждом событии скролла — здорово.

[PozitivuDA]

Круто! Возможно, когда-то и до этого руки дойдут.

[Tenebrius]

А обязательно ли использовать JS? Ведь можно сделать параллакс без него.
Например: habrahabr.ru/post/235531

[asv2001]

Я наверное не стал использовать бы translate3d, если есть translateY или просто translate. Насколько я знаю translate3d не очень хорошо работает на iOS 5 (совсем не работает?), но при этом translate и translateY работают хорошо и во всех браузерах.
З.Ы. Если вы пользуете translate3d для получения ускорения, тоже самое произойдет и при использовании translate и translateY, т.к. transform принуждает браузер включить аппаратное ускорение.
Спасибо за пример!

[Xao]

Зато translate3d включает аппаратное ускорение, хак такой. Хотя я точно не могу сказать, но слышал что-то подобное.

[SerafimArts]

Так и есть. Под мобилки как раз и используется (использовался раньше) хак для включения ускорения, вида: translate3d(0, 0, 0). Потом вроде бы включили аппаратное ускорение по-умолчанию, так что он перестал быть особо нужен, но я не уверен в этом.

[asv2001]

да, Вы все верно говорите. Я о том же, но апаратное ускорение включает также простое наличие transform. Излишнее использование translateZ может привести к проблемам описанным по ссылке: https://plus.google.com/+NatDuca/posts/BvMgvdnBvaQ?e=-RedirectToSandbox

[skipidar]

Спасибо! Мотивирует наконец поиграть с параллаксом

[phoenixweiss]

тутор начального уровня смотрится странно в 2016-м. Уж очень странный материал для перевода выбрали. Кроме того, уже писали что "начинающий" не поймет почему такой "яваскрипт" не работает.
В общем, тех кто знает про Coffee параллаксом не удивишь, а новичков в тупик явно этим "уроком" поставите. Для остальных, как мне кажется, объем и ценность материала все же не совсем для уровня хабра, скорее для личного блога.

[iswitch]

http://www.firewatchgame.com
Тут этот эффект красиво выглядит.