Этот вопрос закрыт для ответов, так как повторяет вопрос Как же реализуется такой эффект анимации при прокрутке страницы?
@letmesp

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

Хочу сделать анимацию, как здесь, где человек вылетает с планеты
Как это сделать? Я нагуглил, что это называется параллакс-скроллинг и нашел один плагин, но с картинками никак не пойму как работать, как менять изображения при прокрутке итд.

Если кто-нибудь сталкивался, подскажите с чего начать или ткните ссылкой, если я плохо гуглю

p.s jquery не интересует
  • Вопрос задан
  • 109 просмотров
Пригласить эксперта
Ответы на вопрос 1
Aleksandr-JS-Developer
@Aleksandr-JS-Developer
Бери и делай
Если вкратце, то, примерно так:
  1. Ловите событие скрола на странице
  2. При скроле смотрите координаты, где сейчас пользователь.
  3. Если он попал в нужный диапазон (доскролил до нужного места, но не проскролил его), то
  4. проверяете сколько он проскролил уже с нужного места и проскрола
  5. в зависимости от процента проскрола изменяете процентное состояние анимации.

Например, нужный блок на "глубине" 600px от верхней границы сайта. Высота секции с анимацией - 500px.
При скроле смотрим, сколько пользователь проскролил. Если >= 600px, то смотрим на текущий скрол (например, 850px) это значит, что нужно анимацию поставить на 50% ( 850 - 600 = 250. 250 - это половина 500, т. е. половина секции с анимацией проскролена)
Я очень надеюсь, что объяснил понятно))

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

Вопрос закрыт для ответов и комментариев

Потому что уже есть похожий вопрос.
Похожие вопросы