Задать вопрос
AltaiR-05
@AltaiR-05

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

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

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

Чтобы анимация не получилась глючной, смотрите, какие css свойства вы анимируете, сверяйте с списком https://csstriggers.com/opacity желательно, чтобы ваши свойства в основных браузерах не влияли на геометрию (пункт layout), идеально, чтобы не влияли и на отрисовку (пункт paint).
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
DancingGod68
@DancingGod68
Привет .
Попробуй использовать плагин этот
Стилями сделаешь как тебе надо
Ответ написан
profesor08
@profesor08 Куратор тега CSS
ручками каждый элемент
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы
22 дек. 2024, в 10:44
15000 руб./за проект
22 дек. 2024, в 10:12
10000 руб./за проект
22 дек. 2024, в 09:51
3000 руб./за проект