Как сделать 3d анимацию перелета в слайдере?

Question

[Алекс]

Нужно сверстать слайдер но в проекте нет jquery (то есть слайдер на обычном js должен работать). вид в десктопе вот такой

Слайдер на десктопе

Т.е. здесь показаны 3 слайда. Если взять в расчет что у нас всего 3 слайда то при пролистывании верхний уходит и становится как бы фоном всего, второй на передний план и третий становится вторым маленьким. если 4 и более то первый просто пропадает (само разумеющееся)

на мобилке попроще, данный слайдер выглядит

Слайдер на мобилке

Планировал использовать glide.js, но если есть варианты другие то предлагайте

Comments

[Hyubert]

https://swiperjs.com/api/

вот с этим можно поиграться - https://swiperjs.com/demos/240-effect-coverflow.html

не уверен что получиться на 100%, но попробовать стоит

Answer 1

[fix0_o]

Тебе нужна идея реализации.

Механизм всегда один, твоя задача скомпоновать его так, что бы у тебя получилось то, что ты хочешь. Физически слои не могут проходить сквозь друг друга (z-index(1-2)) - это механика браузеров. Но можно создать визуальный эффект, будто происходит то что ты хочешь

- "при пролистывании верхний уходит и становится как бы фоном всего, второй на передний план и третий становится вторым маленьким"

.
Для этого тебе необходимы клоны фотографий. К примеру - "

при пролистывании верхний уходит и становится как бы фоном

"
- тебе нужны 2 фото 1 уже фон но со стилем (opacity:0), другой верхний клон. При пролистывании совместно, скрываешь и растягиваешь на весь экран верхний кадр. Второй сдвигаешь и растягиваешь до размеров первого. На третьем просто проявляешь его. Те фото, что находятся в очереди и скрыты, меняешь стили (z-index(1-2)). Просто пойми рамки реализации, рендера браузера, накидай план и действуй.

Тебе в принципе понадобятся только 3 свойства:
1) z-index
2) opacity
3) transform

Я не дал тебе готового ответа, но попробовал дать представление, как это делается. Если разберешься, такие задачи будешь щелкать как орешки.

Comments

[Алекс]

Спасибо. Просидел 2 дня пришёл к таким же выводам, даже что то получилось. https://jsfiddle.net/AShukilovich/La5gqvsm/ Пока стыдно за такую реализацию(название слайдер соответствующее) , но как стартовая точка сойдет, появится немного времени, постараюсь переделать

[fix0_o]

Алекс, ты молодец! Не важно как ты это реализовываешь. Это просто должно работать. Ни кто твой код не будет хейтить, если то, что ты сделал работает. (Работает только на продуктах с конечной реализацией,) т.е. то что не является фреймворком или блоком кода выполняющую внутреннюю функцию приложения. Твой код, есть конечный продукт, который можно использовать только по назначению. Удобство его изменения, это вопрос только личного характера. Чем проще ты сделаешь, тем проще тебе запомнить его архитектуру или объяснить. Тебе не должно быть стыдно. Ты все сделал правильно, если это работает. Ты должен понять, что чтобы реализовать некий функционал, можно использовать уйму вариаций и вариантов, и если кто то скажет, что код ужас, то это только по неразумению и не пониманию. Такое говорят только не профессионалы.

[Алекс]

fix0_o, Вы просто супер мотивирующий человек!