Как сделать сложную маскировку части изображения?

Question

[tarya]

Дизайнеры дали макет, если честно как по мне сверх современного дизайна. Да и еще ко всему требуют чтоб макеты растягивались на 100% ширины экраны.

Так как мы привыкли к тому что все элементы на экране это прямоугольники, то тут у меня по макету фотографии совершенно разных форм.



Про маски более менее понятно. Но тут еще все сложнее как выяснилось.

Например есть момент как на картинке:


Обратите внимание какие скосы у картинок, плюс как оказалось все это должно тянуться на любую длину экрана по ширине, и в ней не просто будет эффект паралакса когда там сдвигается бекграунд, но будет как бы слайд шоу по нажатию кнопки. Ну тут я вообще сложно на это смотрю. Мне кажется что дизайнер чего то не учел.

Просто если подкладывать маску как "раздвижные двери", то какая должна быть маска для экрана 2560 по ширине, а если эту маску просто растягивать по ширине то как сильно маска исказится при трансформации, будут битые пиксели.

Как такое реализовывается. Это должен быть div, так как картинки в них еще и плавают при скролинге. Если честно я такое не встречал, так как делал классические макеты больше.

Спасибо за советы.

Comments

[tarya]

Могу признать такого мне не приходилось делать. Не думаю что есть чтото постыдное что я спросил.

Answer 1

[Михаил Горячкин]

Да что же вы ребята, все это так называемая сложность только на бумаге. Это делается обычными fullscreen дивами наложенными друг на друга с вашими фонами, они же у вас по слоям нарезаны, вот наложите один на дугой и получите то что вам нужно , а уж там можно и двигать их и параллакс пилить. А контент вставляете в последнем самом верхнем блоке. Не надо не каких svg, вы рехнетесь если будете такие формы в svg делать.

Comments

[tarya]

Да, SVG мне не очень хочется. Просто интересно как будет этот див с маской в итоге при тренсформации будет выглядеть. Изображение же в нем растровое, побьется небось некрасиво.

[Михаил Горячкин]

Ну это все завит от качества ваших картинок. Тут надо посмотреть только для второй страницы, там именно картинка, вот надо ее на масштабирование проверить. Но так как у вас сайт поидее fullscree-новый то и макет должен быть в разрешении 1920 а то и больше. Так что должно все быть нормально, тем более какую вы транcформацию с фонами задумали?

[tarya]

Трансформация будет это когда при скроле картинка как бы сползает в блоке самом. background-attachment: fixed.

Да я тут уже дизайнеру сказал что вариант прокатит если сделать как вы посоветовали, что на див с картинкой поверх див с маской в виде гнутостей этих. Интересно как себя поведет эта маска при растягивании на весь экран, плюс там тени во внутрь, как они будут выглядеть в таком виде.

[Михаил Горячкин]

Маску придется нарезать вместе с тенями, а то что вы задумали и есть parralax, так что не волнуйтесь. Тут главное нарезать надо будет правильно, а при трансформации у вас не чего ломаться не будет, так как вы их просто будете двигать друг относительно друга с разной скоростью, а размеры будут оставаться прежними.

[tarya]

Все я до конца продумал как это должно быть! Спасибо друг, выручил. Оказывается сложно только на бумаге. Делаем три слоя. Нижний это картинка сама по себе, второй это маска верхнего края, третий это маска нижнего края, сами по себе они по ширине подготовлены на весь экран, например 2560 ширина, а когда уменьшается экран, то они просто так по центру и остаются а края маски прячутся. Так, один вопрос решен кажется! Теперь с тем чудо-логотипом разобраться.

[Михаил Горячкин]

Рад был помочь)

[tarya]

Или даже два блока хватит.

[Михаил Горячкин]

В зависимости от того, должен ли дом, который на зеленой подложке быть самостоятельным или он к ней относится. Если самостоятельным то больше, если нет то двух должно хватить.

[Михаил Горячкин]

Ну для первой страницы

[Михаил Горячкин]

Ну и если не брать в расчет блоки с текстом.

Answer 2

[Nikolay Talanov]

Используйте svg. Если конкретнее, то svg path. Описываете по координатам по определенному разрешению, устанавливаете заливку (fill), ставите правильный viewBox чтобы смотрелось как надо на разных разрешениях и в общем то все.
Элементы с текстом естественно делаются дивами и другими стандартными dom-элементами и абсолютно позиционируются на странице. То есть svg у вас будет отвечать только за эти нестандартые формы, хотя можно и текст на нем сделать (но по макетам не заметно, что требуется svg textPath).

Answer 3

[tarya]

Все это должно быть еще и на 100% экрана. Я просто думаю как это реализовать. Там как бы нисподающая такая рубашка из фотографий и текста хаотично, но если бы это были прямоугольные блоки то еще понятно как реализовать, а тут они все вот таких форм.

Answer 4

[Alexander Mischuk]

Добавьте изображению обертку, форму которой можно задать трансформацией вроде skew и применив overflow: hidden, и соответственно на такой же градус в обратную сторону поверните изображение.