Как мне начать и какие инструменты я должен использовать для разработки сайтов с потрясающей анимацией? - PullRequest
Новая
       17

Как мне начать и какие инструменты я должен использовать для разработки сайтов с потрясающей анимацией?

0 голосов
/ 08 ноября 2018

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

Я использую фреймворки, такие как Angular и Vue (пока нет React), и мне известны такие библиотеки, как GSAP.

Сейчас мне все еще интересно, как я могу добиться такого результата, как следующие сайты:

https://octoplus.ch/it

https://monza.ferrari.com/it-it/monza-sp2 (посмотрите количество деталей этого!)

... но не знаю, с чего начать, какие инструменты использовать, чтобы иметь такую ​​великолепную анимацию и плавный пользовательский опыт. Может ли кто-нибудь указать мне правильное направление?

Спасибо!

1 Ответ

0 голосов
/ 14 ноября 2018

Большая часть того, что вы видите на этих сайтах, создается библиотеками, которые могут манипулировать элементом html5 <canvas>.

Библиотеки, которые обрабатывают <canvas>:

  • Three.js
  • Babylon.js
  • D3.js

Например, что бы я сделал, чтобы создать что-то вроде https://octoplus.ch/it, это создать веб-сайт на основе Three.js. Загрузка, которую вы видите в начале, - это когда Three.js загружает ресурсы с веб-сайта, у вас не может быть загрузчика без чего-либо загружаемого. После этого все, что вы видите, - это Three.js приложение со сценой и анимацией. Обратите внимание, что они могут не использовать Three.js, но я так и сделаю, так как я знаком с этим. Они используют что-то похожее на это.

Я бы использовал Nuxt.js или Vue для обработки исходного содержимого сайта, такого как часть загрузки, привязки значения загрузки к переменной с помощью Vue.

Итак, для краткого изложения я рекомендую вам приложение Nuxt.js, которое использует Three.js, Babylon.js или D3.js для причудливой графики.

...