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

Question

[letmesp]

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

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

p.s jquery не интересует

Comments

[Aleksandr-JS-Developer]

Для работы со сколом вам не нужны библиотеки.
Вот накидал вам простейшую демку

Вам нужно отлавливать скрол на странице и управлять анимацией через JS.

А вообще:
Скролл (ru)

[Вадим]

Правила сервисва

2. Перед тем как задать вопрос пользователь Сервиса обязан:
2.2 Убедиться в том, что в сети Интернет, и на страницах Сервиса в частности, отсутствуют ответы на данный вопрос. Специально для этого талантливые IT-специалисты создали и развивают поисковые системы Яндекс и Google.;

Первый же результат по запросу "анимация при прокрутке страницы" https://qna.habr.com/search?q=%D0%B0%D0%BD%D0%B8%D...

Как же реализуется такой эффект анимации при прокрутке страницы?

[letmesp]

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

[Вадим]

letmesp,

Хочу сделать анимацию, как здесь, где человек вылетает с планеты

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

[letmesp]

Вадим, Мне бы мануал, как реализовать что-нибудь похожее. Я это и хотел, задавая вопрос

[Вадим]

letmesp, А если Вы воспользуетесь инструментами разработчика и заинспектируете эту планету, из которой вылетает человек, то сами убедитесь, что это набор дивов.

[Вадим]

letmesp, Плагин Вы уже нашли. Читаем всё что написано на страничке плагина на гитхабе, смотрим примеры, смотрим их исходный код - чем не мануал?
Или может Вы не мануал хотели, а чтобы за Вас сделали?

[Вадим]

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

[letmesp]

Вадим, Я просто никогда анимациями не занимался. Честно потрогал библиотеку, но как это применить правильно к картинкам хз. Вы дали идею, что можно анимацию разбить на дивы -- это мне более понятно. За это спасибо)

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

Буду пытаться, спасибо за критику ;)

Answer 1

[Aleksandr-JS-Developer]

Если вкратце, то, примерно так:

1. Ловите событие скрола на странице
   
2. При скроле смотрите координаты, где сейчас пользователь.
   
3. Если он попал в нужный диапазон (доскролил до нужного места, но не проскролил его), то
   
4. проверяете сколько он проскролил уже с нужного места и проскрола
   
5. в зависимости от процента проскрола изменяете процентное состояние анимации.
   

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

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

Comments

[letmesp]

А как показывать анимацию все больше и больше, в зависимости от скролла? Прятать ее где-то, а старую удалять?

[Aleksandr-JS-Developer]

Думаю, просто понять, сколько кусочек земли должен преодолеть пикселей вверх и в право. Например, персонаж из анимации пролетает 700px по оси X и 300px по Y.
Если пользователь проскролил на 50% от высоты секции, то сдвигать персонажа на 50% процентов от 700px по X и на 50% от 300px по Y.