156

Анимация элементов при прокрутке

Приношу извинения за контент, я не обращаю внимания, вижу только код и вам советую.

В проекте возникла задача: сделать изображения листьев подвижными при прокрутке.

Анимация элементов при прокрутке 1

Я никогда такого не делал, решил пройтись по плагинам, но вскоре понял что проще будет разобраться с этим подручными средствами — простым позиционированием css.

Как считаем-то?

«Отсчет будем делать от чего-то подвижного, то есть нужна величина изменяющаяся» — подумал я. А какая величина подвижная при прокрутке? Все верно, отступ от верхнего края.

Итак, мы получаем отступ при прокрутке и кладем в переменную.

Анимация элементов при прокрутке 2
Получение отступа от верхнего края страницы. this в данном случае — document

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

Это не было моей целью. Значит нужно делить число отступа, и получить небольшое смещение. Я делил на 100, на 80, в итоге пришел к значению 30.

Анимация элементов при прокрутке 3
Делим отступ на 30 чтобы получить небольшое число

Супер! Теперь смещение листьев идет так как нужно!

Для того чтобы листья перемещались какие-то вверх, какие-то вниз, я сделал классы. bottom и .top, а в зависимости от класса проставлял знак «-» к числу отступа.

Анимация элементов при прокрутке 4
Разделение на анимацию вверх и вниз

Итак, что я как разработчик хочу? Писать меньше кода, который в итоге будет делать больше. Значит я хочу чтобы текущий код работал на все листья.
К сожалению листья так не думают. Где-то на середине страницы, все листья сместились и получилась такая каша.

Анимация элементов при прокрутке 5

Просмотрев на сколько пикселей они сместились при прокрутке, я решил просто вычесть и прибавить это число к изначальному позиционированию элементов

Анимация элементов при прокрутке 6

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

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

Спасибо за прочтение статьи.

Если материал был полезен для тебя — напиши «спасибо» в комментариях, это займет 30 секунд. Сделаешь приятно 🙂 Спасибо!

Если у тебя есть замечания, пожелания, предложения — можешь так же написать их в комментариях. Я рад новым мнениям и критике.

Поделиться
Отправить

Комментарии