Qurel
@Qurel

Как сверстать такой блок?

Добрый день, коллеги
Прошу вашей помощи как правильно сверстать этот блок.
Мобильная версия:
spoiler
60d02aafeb04c128880949.png

Десктопная версия:
spoiler
60d02ad16cc95463631251.png

Картинка с крабом, пальмами, удочкой и рыбой будет анимироваться при скролле как в этом сайте:
https://www.apple.com/ua/airpods-pro/
Мне дали картинки с покадровой анимацией, я из них сделала видео и буду проигрывать при скролле
Как мне дорисовать фон слева чтобы он стыковался с видео или может как-то по-другому реализовать?
Вот что пока на данный момент получилось:
spoiler
60d02ce230e09869759094.jpeg
  • Вопрос задан
  • 187 просмотров
Решения вопроса 1
Qurel
@Qurel Автор вопроса
да, это куда проще подстроить, нежели стыковки картинки и видео.
Либо же показывайтесь два разных видео для десктоп и самых маленьких.


Решение вопроса
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@ArkadyRomanov
Разработка, связь
Если keyframes для анимации будет недостаточно, то реализация может быть быть через flex. у левого блока сделать фон, прижатый вправо. Тогда он будет стыковаться корректно с тем, что на видео. При этом переход, скорее всего, будет всё равно хорошо виден в связи с тем, что в видео будет использоваться своё сжатие, а у фона - другое. и переход будет заметен
Ответ написан
Ваш ответ на вопрос

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

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