Как делать такие (анимации ?) на сайте?

Question

[Artemmmm13]

Вопрос может показаться глупым, но я действительно не знаю как это называется. Анимации ? 3d модели на сайте ? понятия не имею, но очень хочу научиться делать такие интерфейсы, но не знаю даже что гуглить. Надеюсь опытные люди помогут, направят куда надо.
Ссылка с интерфейсом

Comments

[Kovalsky]

Это работа студии VØR . Исходная ссылка просит логина в инсте

[Artemmmm13]

Kovalsky, Cпасибо за поправку, куда нужно смотреть, чтобы научиться делать такие интерфейсы? Я думал что это какое то 3d, но поискав, ничего подобного так и не нашел.

[historydev]

Kovalsky, кстати круто сделано, источник годный, возьму на заметку некоторые анимации)

[Artemmmm13]

Владимир, А мне не подскажете на счет моего вопроса ? xD))))

[Kovalsky]

Artemmmm13, а где тут тридэ? Вижу очень красивые и качественные двадэ мультики, а тридэ не вижу,

Конкретные инструменты вам не назову, но такие анимации можно сделать большим количеством способов: можно в виде SVG, можно канвой (->WebGL), наверное можно еще как-то. В случае с SVG используются либо средства программной разработки анимаций (тот же snap), либо специализированные, типа AE и средств экспорта этих анимаций в веб среду (bodymovin + lottie). В случае с канвой вариантов до чёрта - d3, ThreeJS, может быть рафаэль еще, тысячи их, проще гуглить чем вспоминать. Например погуглите фреймворки для разработки двадэшных игр, они используют разные подходы для реализации анимаций,

Учитывая размах анимации могу предположить, что это поделка в духе последних трендов - весь интерфейс сделан с помощью WebGL,

[Artemmmm13]

Kovalsky, Спасибо, пойду учиться ) Очень понравилось

[Kovalsky]

Artemmmm13, следите за трендами, подписывайтесь на tympanus::codrops, awwwards и другие ресурсы, там постоянно появляются подобные красивые разработки, на которые можно не только попускать слюни, но ещё и потрогать их руками,

[Роман]

Kovalsky, насчет 3D, вот это https://dribbble.com/shots/8715940-S-X-F
очень похоже по стилистике на это www.ro.me (дождаться графики после видео и мультяшной части)
А последнее как раз сделано в 3D.

Единственное что анимация на https://dribbble.com/shots/8715940-S-X-F достаточно убога и однообразна для 3D, и скорее всего это анимация готовых картинок.

[Artemmmm13]

Роман, Спасибо, много всего посоветовали, только бы изучить все ) Даже если так, выглядит все равно очень круто как по мне

[lUser L]

https://www.youtube.com/watch?v=-R9UO_eNQDg
webflow тутор работы этой студии

Answer 1

[Евгений Щербаков]

Наверно нужно почитать про canvas, webGL, шейдеры, Three.js и всё в этом духе :)

Comments

[Artemmmm13]

Спасибо

[Михаил]

А canvas простите тут причём?

[Евгений Щербаков]

Михаил, я просто написал все возможные "технологии" для рисования и анимаций :)