Как сделать такую анимацию?



@AltaiR-05

Нужно сделать такой слайдер. Может вы встречались с библиотекой с таким функционалом или посоветуйте куда копать.


Решения вопроса 1



@Vlad_IT Куратор тега CSS

Крайне простая анимация, делается на чистом CSS + JS (для обработки смены слайда и последовательного включения анимации, если потребуется). В этой анимации все можно решить при помощи transform и opacity. Присмотритесь к видео (лучше скачайте его, чтобы мотать покадрово), разбейте каждый переход по пунктам. Я вижу, что фон через скейл анимируется отдельно от контента, а в контенте каждая строчка анимируется с transform: translateY(100%) в translateY(0%), последние строки еще анимируют переход opacity: 1 в opacity: 0.
Когда слайд закрывается, весь блок с слайдом анимируется в transform: scale (какое-нибудь число больше единицы).

Готовый код вам никто не даст, т.к. анимация слишком уникальна. Да и как правило, легче самому сделать анимацию, чем подстраивать чужую под свои нужды/

Чтобы анимация не получилась глючной, смотрите, какие css свойства вы анимируете, сверяйте с списком https://csstriggers.com/opacity желательно, чтобы ваши свойства в основных браузерах не влияли на геометрию (пункт layout), идеально, чтобы не влияли и на отрисовку (пункт paint).



1

комментарий


Ответы на вопрос 2



@DancingGod68

Привет .
Попробуй использовать плагин этот
Стилями сделаешь как тебе надо



@profesor08 Куратор тега CSS

ручками каждый элемент

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *