Как реализовать анимации как на сайте Apple?

Question

[Dmitry]

Здравствуйте, подскажите пожалуйста, как ПРАВИЛЬНО реализовать плавные анимации появления и пропадания текста и картинок. За счет чего можно добиться подобного функционала? Что используют они? Вот пример их страницы: https://www.apple.com/iphone-se/

Comments

[Пашенька]

Понятие правильно и неправильно в данном контексте не уместны. Это выражение субъективной оценки. В данном случае стоит оперировать терминами, которые можно оценить объективно, например, производительность. Так вот, чтобы это работало эффективно и производительно, нужен опыт. Опыт приобретается практикой. Используют они, вы удивитесь.. JavaScript.

[Hcuy]

Пашенька, неожиданно

[WapSter]

Hcuy, ну так это правда. Вы с автором хотели увидеть какой нибудь мега пупер плагин, который за вас все сделает?)

[Dmitry]

WapSter, Нет) Как делать примерно понятно и уже реализовывали похожий функционал и всё работает. Но хотелось просто мнение людей данного сообщества, поэтому и был задан вопрос. А на счет плагинов, даже и не рассчитывал.)

[Пашенька]

Dmitry, в таком случае вам стоило задать такой вопрос: вот я реализовал страничку с анимациями, но всё тормозит/местами работает не плавно/на таком-то девайсе вообще не работает и подобное. Как можно улучшить производительность/кроссбраузерность, тогда можно было бы поговорить предметно.

[Dmitry]

Пашенька, Полностью согласен. Спасибо. Если честно всё работает хорошо и без тормозов, адаптив присутствует, просто хотелось бы узнать что-то новенькое из данного сегмента). Думал, может какая-то интересная статья есть на этот счет)

[Пашенька]

Dmitry, если вот так глобально, то рендерить кадры, используя requestAnimationFrame, забыть о существовании setTimeout/Interval.
Свести перерисовки к минимуму.
Хорошим мерилом будет: поставить троттлинг процессора в 6x и посмотреть, как будет работать в таком контексте, замерив FPS. Если при таком раскладе всё работает хорошо, значит то, что вам нужно знать, вы знаете и ничего кардинально нового не узнаете.
В девтулзах есть инструменты для всего этого.

[Dmitry]

Пашенька, Большое спасибо, Павел! Возьму на заметку).

[Hcuy]

WapSter, ну мечтать не вредно :)

Answer 1

[Никита Шинкевич]

Открыть исходники страницы, скриптов и прочего и посидеть часик-другой... Вытянуть все мясо и сделать у себя.