@SASHIKUBIVATOR

Как встроить на сайт сложную 3d анимацию?

Есть папка с картинками устройства вокруг, нужно чтобы из этого по итогу получилась красивая анимация, которая при прокрутке будет крутить устройство. Мне нужно использовать какой-нибудь js репозиторий может быть, или же попробовать собрать в какой-нибудь программе для анимирования сначала из этих png картинок целую анимацию, а потом уже пихать ее на сайт?
Извиняюсь за, может быть, глупый вопрос, но с такими сложными анимациями никогда не работал. 619e445feaf27542036480.jpeg
  • Вопрос задан
  • 111 просмотров
Пригласить эксперта
Ответы на вопрос 4
Get-Web
@Get-Web
Front-End Developer
Объединяете все картинки в спрайт и затем меняете background-position с учетом размера одного кадра, либо можно просто менять сами картинки, но это более ресурсоемкий процесс, к тому же не все картинки могут успеть прогрузиться. Готового примера под рукой нет, но смысл примерно такой же как тут https://codepen.io/get-web/pen/pqrvLY просто смена кадров с определенной скорость, в вашем случае вы будете привязываться либо к позиции курсора, если движение будет мышью, либо к кнопкам через setTimeout

update: Готовые библиотеки можно поискать по запросу "360 view js". Например вот: https://scaleflex.github.io/js-cloudimage-360-view/
Ответ написан
@its2easyy
делал свой плагин для таких анимаций https://github.com/its2easy/animate-images.
Чтобы привязать переключение к скролу можно использовать GSAP ScrollTrigger
Ответ написан
profesor08
@profesor08
Пример с анимацией по наведению курсора. Минусом будет тут то, что картинки надо объединить в одну длинную картинку, где все кадры следуют друг за другом по порядку. Онлайн сервисы по объединению картинок в спрайт есть.

Ответ написан
Комментировать
sharnirio
@sharnirio
Front-end developer
О неужели пригодились мои закладки ) Cам не юзал, но встречал две подобных библиотеки link1 and link2 выбирайте какая больше подходит
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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