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

Question

[WebEditor]

Добрый день!
Подскажите, как сделать подобный слайдер https://dribbble.com/shots/10484443-The-Ark ?
В какую сторону смотреть? Есть ли варианты которые можно доделать для получения такого слайдера ?

Comments

[Valera Dobroman]

Такие слайдеры делаются с помощью JS, а 1 слайд это видео

[Иван В]

Такой слайдер если только с нуля делать. Лучше даже разбить задачу на несколько:
1) Анимация отображения \ схлопывания заголовка из двух слов
2) Всплытие \ уход картинки в "туман"
3) Анимация движения точек по линии.
4) Собрать все вместе и закодить переключение.
По отдельности уже не кажется чем-то сложным, попробуйте сделать.

[Danny Arty]

Согласен с комментом выше, такой лучше с нуля делать. В принципе ничего сверхъестественного, просто эффектные анимации перехода и стилизация навигации

[Anton Semenov]

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

Сходу находил один удобный инструмент https://greensock.com/gsap/

Но как я понимаю он платный, но удобный и быстрый для построения анимаций.

А еще, что бы визуально было вот прямо вот так, то обычно для этого используют three.js https://threejs.org/

На чистом javascript + svg + canvas тоже вариант, но долго и дорого )

[Ross Alex]

Anton Semenov, я делал подобные на GSAP используя Timeline.

Answer 1

[Katarko]

Самый обычный слайдер, заполненный анимацией.

Попробуй https://kenwheeler.github.io/slick/ , с акцентом на "Slider Syncing" . Удачи!

Comments

[WebEditor]

понятно, что можно переделать слайдер. Вопрос в том числе и про анимацию под картинкой