Как создать подобный слайдер?

Question

[Dima_Makh]

Необходима помощь с созданием подобного слайдера:


Остановился пока на этом:
click

Я никак не могу найти как сделать треугольную маску для изображений и разный размер этих масок. Вещи типа mask, clip-path и т.д. имеют плохую поддержку.

Да и вообще в первый раз делаю что-то подобное. Есть может похожие готовые решения?

Comments

[2cha.headz]

просите дизайнера нарисовать png или svg маску (или сами, если возможно, из дизайна выковыривайте), и эту маску поверх квадратного блока накладывайте

[Сергей delphinpro]

css.yoksel.ru/svg-masks

[yarovikov]

Все зациклились на форме слайда, хотя тут вся сложность, как мне кажется, в технической реализации смены слайдов.

[Максим Тимофеев]

Как заметил yarovikov, тут явно проблема в том, что слайды идут не в линию один за другим, а имеют еще соседей по высоте, при чем не один под одним, а хаотично. Так что слик тут не подойдет. Тут наверное свой велосипед надо писать.
Я обычно решаю это так: показываю сколько стоит такая реализация и обычная. Допустим 20$ против 200$. Это легко оправдать тем что решение не стандартное. 99,9% случаев, дизайнеру дают по башке и объясняют что так рисовать не надо. И завтра у Вас будет адекватное ТЗ, которое запросто реализуется на слик.

[yarovikov]

Максим Тимофеев, да можно и слик. И все это дело красиво анимировать.

[Александр]

Максим Тимофеев, ага, ведь главная задача дизайнера не в том, чтобы придумать что-то новое и интересное, а в том, чтобы штамповать конвеер однотипных сайтов с одним и тем же набором модулей. Зачем нужны картины, зачем нужна разная и нестандартная архитектура? Ведь главная задача дизайнера - сделать так, чтобы строителю нужно было всего лишь сложить 2 кирпичика, как он это делает всегда и ни на минуту не нужно было напрягать свои мозги. Превосходно!

[Максим Тимофеев]

LordGuard, где я сказал что не надо такое делать? Я сказал, что есть очень большая разница между типовым решением и не типовым. Я как раз люблю не типовые. Я бы с удовольствием поигрался с таким ТЗ, например, но надо быть уверенным, что заказчик понимает трудоемкость и ему реально это нужно.
Задача дизайнера не только нарисовать красиво, но и поместиться в отведенный бюджет. Поэтому он должен понимать, что просто реализуется, а что нет. Чаще нужен конвейер, это печально, но это факт.

[Александр]

Максим Тимофеев, как часто дизайнеру вообще сообщают бюджет на программиста?

[Максим Тимофеев]

LordGuard, Это уже вопрос к тому кто ставит ему задачу.

[Александр Попов]

Максим Тимофеев, что, серьёзно за простой слайдер платят 20 долларов, или вы так, абстрактно? Вроде много как-то. Я в основном вижу проекты, где за целый сайт (лендинг к примеру) платят долларов 40-50, а там работы куда как больше.

[Максим Тимофеев]

Александр Попов, 20 - это цифра просто показать порядок, но 40 за день - это тоже печально.

[Александр Попов]

Максим Тимофеев, это хорошо если день. Я вот фреймворки пока толком не освоил, пилю всё ручками. Там если делать на совесть, можно и 3-4 дня просидеть. Собственно потому и считаю, что фриланс не особо рентабелен... Чёрт возьми, я за трёхчасовое занятие индивидуальное получаю 15-20 долларов (смотря как, в центре веду или на дому у себя), это даже не полный день работы. А тут за 50 долларов столько геморроя выходит.

P.S. Я собственно к тому и вёл - было бы здорово, если бы за слайдер платили столько. Но увы) С другой стороны - если писать такое самому, то оно пишется один раз в жизни, и потом уже подключается в пару строк в любой проект, там уже вообще затрат ноль. Но мы же про реализацию говорили. И кстати да, если слайдер - крутой, с поддержкой touch events и полной кроссбраузерностью, то это стоит куда дороже 20 долларов. Но проблема в том, что опять же, заказчик столько платить не готов за такую "мелочь".

[Максим Тимофеев]

Александр Попов,

я за трёхчасовое занятие индивидуальное получаю 15-20 долларов

Я вот фреймворки пока толком не освоил

Тогда что Вы преподаете? Что-то совершенно другое?

20$ за три часа - это мало, но мало для хорошего специалиста в it. Так что тут надо понимать, что именно Вы преподаете и какой у Вас уровень владения материалом.

Я не видел нормального мидла в web, который бы получал меньше 10-15$ в час. Есть в регионах низкие зп, но как правило при проверке, там стек короткий и не глубокие знания.

[Александр Попов]

Максим Тимофеев, "Тогда что Вы преподаете? Что-то совершенно другое?" - да нет, как раз HTML, CSS и JavaScript. Но именно сам язык, а не либы. Уровень владения - довольно хороший. Я даже год назад написал работающий интерпретатор JS с полной поддержкой возможностей ES5 и частичной - ES6. Ну и опыт программирования на JavaScript и PHP года с 2009-ого примерно.

"Я не видел нормального мидла в web, который бы получал меньше 10-15$ в час" - я не говорю про компании, я писал про фрилансерские сайты. Там всегда платят меньше :)
Что до компаний... Туда не всегда так уж просто устроиться. Хотя бы из-за больших требований по знанию больших библиотек уровня jQuery и сложнее.

[Максим Тимофеев]

Ну и опыт программирования на JavaScript и PHP года с 2009-ого примерно.

Многое изменилось и тут дело даже не в том, что появились framework-и новые. Языки сильно изменились, особенно js. Надо подтянуться, я так понимаю база у Вас отличная, не должно занять много времени.

я писал про фрилансерские сайты. Там всегда платят меньше

??? Как раз наоборот. Самое плохое место по ЗП - это региональные компании. Фриланс разный, и можно там найти "рабский труд", а не работу, но и нормальной работы там хватает.

Хотя бы из-за больших требований по знанию больших библиотек уровня jQuery и сложнее.

При знании js, освоение Jquery не занимает большое время. Что может быть проще jquery? Да, надо иметь стек. При чем не только для компаний. Голый html и css никому не нужен. Надо освоить не только jquery, желательно парочку css frameworks, хотя бы бегло. Уметь flex и grid, какой-нибудь препроцессор типа less и/или Sass(scss). Сборщик типа gulp. Как без этого работать? Если у Вас голые языки в стеке - тогда понятно почему 10$ в час. Что мешает прокачать себя?

Answer 1

[Марти Макфлай]

Вот интересная тулза для создания разных форм с помощью border-radius - https://9elements.github.io/fancy-border-radius/fu...

Answer 2

[Андрей Федоров]

Вот чего удалось добиться настройками border-radius. Не совсем точное соответствие, но все же. Светло-зеленый цвет - это генерируемая фигура border-radius, розовый - оригинал, болотный зеленый - наложение.
https://codepen.io/aliencash/pen/pGLqdL

Идея отсюда https://habr.com/ru/company/ruvds/blog/426731/