Все элементы идут отдельными изображениями (солнце, самолет, блики, деревья..).
Посоветуйте, как лучше верстать подобные макеты, чтобы это всё ещё было адаптивным?
Использовать абсолютное позиционирование?
Сергей: Сделать всё на css это конечно ппц)) А вот цельная svg это уже интересно, не знаешь где почитать можно об этом? Ёксель вроде про svg задвигает неплохо?
Александр Шибков: У вас картинка в каком формате? Если растр, то лучше попросить у дизайнера векторный вариант.
Вектор загоняешь в иллюстратор и сохраняешь в свг
Или может быть фотошоп со встроенными смарт объектами. Тогда по отдельности смарт объекты в иллюстратор, потом в свг.
Что касается анимации, то в принципе анимируется так же как html элементы.
Сергей: Все элементы в векторе. Меня именно заинтересовали слова "цельная svg". Это как? Спрайтом? И их потом также позиционирование? Интересует какой-либо вариант без позиционирования.
Александр Шибков Если это все будет анимироваться, значит дизайнер был в курсе этого. Пытай его на предоставление вектора. А библиотек для анимации полно, например anime-js.com, svgjs.com, snapsvg.io/demos или на CSS
Александр Шибков: не спрайт, а именно одна картинка. в свг же можно управлять отдельными контурами/элементами.
Лучше пример - codepen.io/iamjoshellis/pen/KVdQqm
Вот единая цельная картинка. Масштабируется. Отдельные элементы анимируются (ткните барабаны)
Сергей: Вот эт конечно круть. Я думаю в идеале оно так и должно было делаться. А по поводу канваса не знаешь? Есть подобный сайт, но там на канвасе всё.
Александр Шибков: канвас - это просто рисование. Как минимум добавляется самостоятельная обработка мыши для отработки реакций и прочий геморрой. Как в юности на паскале в графическом режиме =)
Можно поэкспериментировать слоями - все одного размера в формате png24. Тогда не надо позиционировать. И картинки будут уменьшаться пропорционально, если задать img width:100%
А поподробнее? Взять кучу картинок 1080p, к примеру, на каждой из которой будет по одному элементу и индексом наложить их друг на друга?oO Сколько это чудо весить будет интересно)) Забыл ещё дописать, что потом будут элементы анимироваться. Так что не катит, если я правильно всё понял)
Zubastik_1: Сорян. Просто очевидно, что это всё дело анимироваться будет, просто иначе какой смысл это всё по отдельности позиционировать? Пихнул одной картинкой на фон и проблем то)
Сергей: Если размер будет нормальный, то вполне неплохой способ, вот только если без анимации.
А если анимации нет, то и смысл делать такой бутерброд?)
