Как создать анимацию как здесь https://www.apple.com/iphone-se/?

Question

[Иван Симонов]

Здравствуйте
Увидел сайт - https://www.apple.com/iphone-se/
Подскажите, где почитать о том как создать анимацию с телефонами как на первом экране этого сайта https://www.apple.com/iphone-se/?

Comments

[RAX7]

https://www.reddit.com/r/javascript/comments/54mhz...

Answer 1

[its2easyy]

В 3д редакторе создается модель и анимируется, потом нарезается покадрово, получается набор изображений типа такого. Потом к скролу страницы привязывается функция, которая переключает отдельные картинки. В простом случает это просто img где меняется src, в сложном это canvas с предзагрузкой. Много готовых плагинов, например.
Для коротких анимаций можно объединить кадры в спрайт и переключать положение, например плагином

Answer 2

[Юрий]

Это не анимация, а видео: https://www.apple.com/105/media/us/iphone-se/2020/...

Comments

[Иван Симонов]

я об анимации с телефонами, которая происходит при скролле

[Юрий]

Иван Симонов, каюсь, не проскроллил )
Судя по всему, там связка из WebGL + Unity. По крайней мере, гугл по ошибке, которую страница плюёт в консоль, выдаёт тексты про Unity. Больше не скажу, WebGL для меня тёмный лес вообще.

Answer 3

[Евгений Коелсник]

https://css-tricks.com/lets-make-one-of-those-fanc...