meam 2 апр 2016 в 14:14

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

5 мин

57K

CSS * CoffeeScript * HTML * JavaScript * Веб-разработка *

Туториал

Перевод

+14

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

acupofspirt 2 апр 2016 в 15:26

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

dshster 2 апр 2016 в 18:13

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

Alexufo 2 апр 2016 в 20:32

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

FrozenInternet 3 апр 2016 в 07:20

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

meam 3 апр 2016 в 07:22

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

dbanet 3 апр 2016 в 11:35

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

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

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

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

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

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

dom1n1k 3 апр 2016 в 12:06

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

Alexufo 3 апр 2016 в 13:13

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

dom1n1k 3 апр 2016 в 13:24

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

moldabekov 5 апр 2016 в 10:49

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

SerafimArts 5 апр 2016 в 11:02

https://tinypng.com/

Psychosynthesis 3 апр 2016 в 01:24

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

PavlovM 3 апр 2016 в 04:22

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

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

yea 3 апр 2016 в 14:44

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

PozitivuDA 3 апр 2016 в 14:45

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

Tenebrius 3 апр 2016 в 14:45

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

asv2001 3 апр 2016 в 14:46

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

Xao 4 апр 2016 в 06:28

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

SerafimArts 4 апр 2016 в 07:44

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

asv2001 4 апр 2016 в 10:22

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

skipidar 3 апр 2016 в 16:08

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

phoenixweiss 3 апр 2016 в 20:10

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

iswitch 4 апр 2016 в 07:45

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

Зарегистрируйтесь на Хабре, чтобы оставить комментарий