← Назад в «Блог»
567

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

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

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

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

Как считаем?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Результат на странице

https://dev-postnov.ru/works/bounty/

Полезно
2
1
Непонятно
1
Поделиться
Отправить
Линкануть
Вотсапнуть

Подпишись на крутой канал о фрилансе

Я делюсь там фишками о фрилансе: деньги, клиенты, автоматизация, фриланс. Раньше это был закрытый материал с платным доступом. Сейчас он открыт. Иногда подписчикам будет открываться платные материалы. Подписаться

← Назад в «Блог»

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *