Как реализовать похожую анимацию?

Question

[artuh_a]

У кого-нибудь есть идеи как реализована такая анимация?

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

Answer 1

[Степан Крапивин]

Это параллакс эффект в четыре слоя.

Каждый слой двигается со своей скоростью.
На каждом слое расстояние между карточками не меняется.

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

Чем выше слой, тем больше скорость.

Comments

[artuh_a]

Степан Крапивин, про курсор да, понял.

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

[Степан Крапивин]

artuh_a, при курсоре в левом краю экрана скорость у каждого слоя своя
Условно: у первого слоя скорость 100%, у второго - 80%, третьего 70%

например если курсор ровно по-середине экрана - скорость у всех 0.
Если курсор 120px от цетнра, то скорость перемещения первого слоя 120px/cек (100% от 120px) у второго 96px/сек (80% от 120px) и так далее

Какие конкретные скорости и коэффициенты у слоёв на том сайте - не знаю. Описал приблизительно.

[artuh_a]

Степан Крапивин, с этим я понял - чем дальше от центра к краю тем выше скорость на величину этого перемещения. Одинаково работает в обе стороны меняется лишь направление.

Я немного про другое. Например, если берем такие же скорости: 1 слой - 100%, 2 слой - 80%. Курсор у нас неподвижен, скорости не меняются. Все карточки у нас зациклены.

В момент, когда карточка №1 из 1 слоя сместилась за край экрана влево, расстояние от нее до карточки №2 из 2 слоя, находящейся справа было 200px. После полного цикла прокрутки всех остальных карточек, эта карточка появляются теперь уже справа и расстояние от нее до карточки №2 стало не 200px, а намного больше, т.к. все это время скорость у них была разной и не менялась, а двигались они какое-то время.