Существует ли в природе подобный слайдер?

Question

[Yastr]

Возможно кто то видел, что нибудь такое:
пытался сделать сам, но мозгов не хватает)

Answer 1

[Алексей Ярошевич]

Имхо, это все css3, js тут мало играет.

Делаете прямоугольный «слайдер», который загибаете, а его элементы наоборот разгибаете. При наличии какого-то класса сдвигаете, опять же, css3 свойствами и ставите нужную прозрачность (или меняете картинку), тени.

Вариант 2: svg. В этом случае, делаете inline svg, с нужной формой элементов, классы там тоже поддерживаются и при наличии класса active на элементе двигаете его вниз и меняете прозрачность.

Comments

[Yastr]

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

[Алексей Ярошевич]

возможно, вы меня тоже.
Есть такое свойство transform, оно позволяет делать skewY: codepen.io/agelber/pen/tyfku

Подробнее, например, тут: htmlbook.ru/css/transform

[Yastr]

спасибо! понял о чем вы сразу, но не понял как это может помочь) только дошло, пошел пробовать!

[Алексей Ярошевич]

Наздоровье ;-) Правда, я посмотрел вашу верстку, придется немного переделать имеющийся css.

[Yastr]

все хорошо, кроме того, что картинки плывут. layout.by/slider/2

[Алексей Ярошевич]

Похоже, это баг в движке хрома. в файрфокс все замечательно ;-(

[Алексей Ярошевич]

У вас наружний блок модифицируется чрезе transform3d, а внутренний через skew. Может быть в этом дело?

[Yastr]

да. только что проверил

[Yastr]

еще 1 свойство попробовал, работает аналогично - transform: rotate

[Yastr]

хотя не совсем) со всем разобрался, еще раз спасибо!

[Алексей Ярошевич]

Спасибо w3c ;-)

[Yastr]

Все еще пытаюсь привести слайдер к виду на макете. Возможно вы поможете в этом топике - Как сместить target index в jcarousel с первого слайда на второй? ?)