@nickejes

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

Нужно так же анимацию или похожую. Как на сайте apple.com. На этом моменте начинается анимация при прокрутке меняются обьекты появляются и исчезают. Как сделать такое же?
62ab439eae1f8351515658.png
  • Вопрос задан
  • 180 просмотров
Пригласить эксперта
Ответы на вопрос 1
Eugevin
@Eugevin
22 года, frontend как смысл жизни
Вижу, что вопрос еще не решен, но вам все правильно написали в комментариях.

62b028f82b039784045541.png

Да, скорее всего, на сайте Apple используется обычный IntersectionObserver. То есть логика какая: у нас есть страничка и на ней расположены элементы с определенными дата-атрибутами. Я смотрел страницу с IPhone13 и там, к примеру, такие элементы - это data-fiesta и data-build-id (их там конечно больше, потому что анимации разные). Логика такая: при инициализации страницы с помощью querySelectorAll и IntersectionObserver поочередно создаются массивы из одинаковых по анимации элементов и на них вешается обработчик на событие появления на экране, а дальше либо ручками анимировать, либо использовать AnimeJS, GSAP и тд.

*Ничего сложного тут ничего нет, это же не игра на canvas - можно просто открыть исходный код страницы и с первого взгляда все станет +- ясно как работает.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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