Woksy
@Woksy
junior web-developer

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

Всем привет, кто-нибудь знает подобное готовое решение/плагин?
Имею ввиду сам плавающий эффект по горизонтали

https://drive.google.com/file/d/1aeJ-dq6dRARRVtKV9...
  • Вопрос задан
  • 287 просмотров
Решения вопроса 1
sfi0zy
@sfi0zy Куратор тега JavaScript
UI developer. Верстаю неверстаемое.
В соседнем ответе все верно написали. CSS-трансформации - это именно то, что нужно в такой ситуации. Технически вся красота возникает из-за параллакса - там несколько слоев движутся с разной скоростью. Так что здесь не обязательно именно слайдер использовать - это может быть любой инструмент для построения кастомного скролла (с инерцией). При желании можно свой написать, это не так сложно, нужен лишь школьный справочник по физике, но можно и готовый инструмент взять. Тот же Locomotive Scroll вполне сгодится.

В этом примере как раз что-то похожее (только нужно открыть на CodePen - горизонтальный скролл не очень дружит с iframe-вставками):
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@t800zippygod
К сожалению, вряд ли такой плагин существует. Похоже на кастомное решение от гения веб-разработки. Скорее всего сделано с помощью Канваса (то что похоже на ось координат) и обычного слайдера (у которого элементы расположены в 3D перспективе). Далее в зависимости от величины прокрутки меняется положение линий на канвасе и transition: transformX у слайдов
P.S. если есть доступ к сайту, проще открыть панель разраба и посмотреть
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы