Реализация данного сайта?

Question

[vlad_lutsky]

https://www.invisionapp.com/studio - сам сайт
Какой подход рекомендуется соблюдать при создании похожего проекта? Существуют ли похожие проекты с такой анимацией? какие лучше использовать библиотеки?

Comments

[Artem Zelenskiy]

https://webref.ru/css/animation
https://learn.javascript.ru/css-transitions

[vlad_lutsky]

Artem Zelenskiy, немного не то. Там при fullhd Разрешении - во время прокрутки страницы анимируются объекты, как этого добиться?

[Руслан Гильфанов]

Очевидно, на сайте по ссылке использован React (судя по атрибуту data-reactid в вёрстке). Но думаю нет принципиальной разницы между js-фреймворками (AngularJS, Vue.js).

Искать библиотеки под любой из этих фреймворков думаю лучше на GitHub, так как популярность любой библиотеки отражается в количестве поставленных "звёзд", а поддерживаемость по дате последнего обновления и количестве котрибьютеров.

В описаниях на GitHub, документации или на сайтах проектов, возможно удастся найти и ссылки на примеры использования.

[Сергей]

Такие сайты дают очень мало конверсий (личный опыт). Красиво, но не функционально.
Плюс на ноуте за 100к жутко тормозит с интегрированным видео

Answer 1

[Александр Таратин]

https://greensock.com/ можно создать таймлайн с анимационными эффектами и прокручивать его в зависимости от скролла.

Comments

[Coffin]

Лагать будет знатно зато :)

[Александр Таратин]

Coffin, Ну чтоб совсем не лагало только webgl остается, но тогда кучу других проблем получим.

[Coffin]

Александр Таратин, Но так как лагает при анимации greensock лучше вообще без анимации :)

Answer 2

[jenovas]

Там для анимации какраз и greensock испольуется

Answer 3

[Дмитрий Рублёв]

Можете ещё тут почитать про создание аналога кучу лет назад. Не особо ответит на вопросы, наверное, но может пригодиться.