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

Question

[Qurel]

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

spoiler

Десктопная версия:

spoiler

Картинка с крабом, пальмами, удочкой и рыбой будет анимироваться при скролле как в этом сайте:
https://www.apple.com/ua/airpods-pro/
Мне дали картинки с покадровой анимацией, я из них сделала видео и буду проигрывать при скролле
Как мне дорисовать фон слева чтобы он стыковался с видео или может как-то по-другому реализовать?
Вот что пока на данный момент получилось:

spoiler

Comments

[Пашенька]

Так вы ни в жизни не состыкуете. Делайте всё в видео.

[Qurel]

Пашенька, тогда мне надо показывать в мобильной версии правую часть видео, а в десктопе все. Это можно реализовать?

[Пашенька]

Qurel, да, это куда проще подстроить, нежели стыковки картинки и видео.
Либо же показывайте два разных видео для десктоп и самых маленьких.

[Qurel]

Пашенька, спасибо, это хороший вариант

[Lord_Dantes]

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

[Вадим]

Qurel, а по-моему проще вынести краба с тенью и пальмами в видео с прозрачным фоном и позиционировать уже дальше как угодно.
Разве что рыбы не видно, не понятно что там должно проихсодить. Если там анимация с реакцией воды, то и эту часть тоже взять в видео, но без самого водоёма. Таким образом, куда бы не был помещён краб - анимация будет ок и стыковать ничего не надо.

[Qurel]

Вадим, есть анимация с реакцией воды

Как сделать видео с прозрачным фоном?

[Вадим]

Qurel, Я курирую вопросы по js, не по монтажу видео. Всё что я могу Вам ответить Вы можете найти и сами.
Например, так.

Answer 1

[Qurel]

да, это куда проще подстроить, нежели стыковки картинки и видео.
Либо же показывайтесь два разных видео для десктоп и самых маленьких.

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

Answer 2

[Arkady Romanov]

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