Вёрстка отдельных элементов?

Question

[IIIu6ko]

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

Comments

[Ярослав Иванов]

обычная верстка с z-index'ом

[Ярослав Иванов]

да картинкой одной вставь и все ))))

[IIIu6ko]

Ярослав Иванов: Это потом анимироваться всё будет)

[Сергей delphinpro]

Да, абсолютами.
Картинки svg. А можно заморочиться и сделать все css-ом )

[Сергей delphinpro]

можно вообще сделать цельную свг и анимировать ее элементы.

[IIIu6ko]

Сергей: Сделать всё на css это конечно ппц)) А вот цельная svg это уже интересно, не знаешь где почитать можно об этом? Ёксель вроде про svg задвигает неплохо?

[Сергей delphinpro]

Александр Шибков: У вас картинка в каком формате? Если растр, то лучше попросить у дизайнера векторный вариант.
Вектор загоняешь в иллюстратор и сохраняешь в свг
Или может быть фотошоп со встроенными смарт объектами. Тогда по отдельности смарт объекты в иллюстратор, потом в свг.
Что касается анимации, то в принципе анимируется так же как html элементы.

[IIIu6ko]

Сергей: Все элементы в векторе. Меня именно заинтересовали слова "цельная svg". Это как? Спрайтом? И их потом также позиционирование? Интересует какой-либо вариант без позиционирования.

[Андрей Б.]

Александр Шибков Если это все будет анимироваться, значит дизайнер был в курсе этого. Пытай его на предоставление вектора. А библиотек для анимации полно, например anime-js.com, svgjs.com, snapsvg.io/demos или на CSS

[Сергей delphinpro]

Александр Шибков: не спрайт, а именно одна картинка. в свг же можно управлять отдельными контурами/элементами.
Лучше пример - codepen.io/iamjoshellis/pen/KVdQqm
Вот единая цельная картинка. Масштабируется. Отдельные элементы анимируются (ткните барабаны)

[IIIu6ko]

Андрей Б.: Да я уже сверстал, мне просто на будущее, чтобы в следующий раз себе мозг не выносить с абсолютом) А за библиотеки спасибо, гляну.

[IIIu6ko]

Сергей: Вот эт конечно круть. Я думаю в идеале оно так и должно было делаться. А по поводу канваса не знаешь? Есть подобный сайт, но там на канвасе всё.

[IIIu6ko]

Сергей: https://dubai.aviasales.ru/

[IIIu6ko]

Сергей: Я так понимаю там что-то подобное? Тоже одной картинкой и потом анимируються элементы по отдельный на js?

[Сергей delphinpro]

Александр Шибков: канвас - это просто рисование. Как минимум добавляется самостоятельная обработка мыши для отработки реакций и прочий геморрой. Как в юности на паскале в графическом режиме =)

[Сергей delphinpro]

Хотя если без взаимодействия с пользователем, то проще. тупо перерисовываем кадры или часть кадра

[IIIu6ko]

Сергей: Ну в общем svg и анимация на js = решение задачи. Спасибо! Надо будет поподробнее про svg почитать)

Answer 1

[Zubastik_1]

Можно поэкспериментировать слоями - все одного размера в формате png24. Тогда не надо позиционировать. И картинки будут уменьшаться пропорционально, если задать img width:100%

Comments

[Сергей delphinpro]

с анимацией проблемы будут

[IIIu6ko]

А поподробнее? Взять кучу картинок 1080p, к примеру, на каждой из которой будет по одному элементу и индексом наложить их друг на друга?oO Сколько это чудо весить будет интересно)) Забыл ещё дописать, что потом будут элементы анимироваться. Так что не катит, если я правильно всё понял)

[Zubastik_1]

Сергей: про анимацию не біло речи вроде.

[Zubastik_1]

Александр Шибков: весить будет одинаково примерно.

[IIIu6ko]

Zubastik_1: Сорян. Просто очевидно, что это всё дело анимироваться будет, просто иначе какой смысл это всё по отдельности позиционировать? Пихнул одной картинкой на фон и проблем то)

[IIIu6ko]

Zubastik_1: Почему одинаково? То ты берёшь один элемент 400х400 к примеру, а то ты берёшь слой 1920х1080)

[Сергей delphinpro]

Александр Шибков: на самом деле будет почти одинаково) картинки без цветовых переходов, а пустота легко сжимается. png - это ведь не битмап

[Zubastik_1]

Александр Шибков: не пробовал но мне кажется анимировать можно точно так же - задавая отрицательные координаты, хотя могу ошибаться, не пробовал

[IIIu6ko]

Сергей: Если размер будет нормальный, то вполне неплохой способ, вот только если без анимации.
А если анимации нет, то и смысл делать такой бутерброд?)

[Zubastik_1]

Александр Шибков: Потому что остальное пространство будет прозрачное, то есть пустое, соответственно весить ничего не будет.

[IIIu6ko]

Zubastik_1: Ну да, эт надо пробовать :)