Задача: сделать изображения листьев подвижными при прокрутке.
Я никогда такого не делал, решил пройтись по плагинам, но вскоре понял что проще будет разобраться с этим подручными средствами — простым позиционированием css.
Как считаем?
«Отсчет будем делать от чего-то подвижного, то есть нужна величина изменяющаяся» — подумал я. А какая величина подвижная при прокрутке? Все верно, отступ от верхнего края.
Итак, мы получаем отступ при прокрутке и кладем в переменную.
Отступ получили, но если мы просто будем ставить смещение на размер отступа, нас ждет бунт листочков.
Это не было моей целью. Значит нужно делить число отступа, и получить небольшое смещение. Я делил на 100, на 80, в итоге пришел к значению 30.
Супер! Теперь смещение листьев идет так как нужно!
Для того чтобы листья перемещались какие-то вверх, какие-то вниз, я сделал классы. bottom и .top, а в зависимости от класса проставлял знак «-» к числу отступа.
Итак, что я как разработчик хочу? Писать меньше кода, который в итоге будет делать больше. Значит я хочу чтобы текущий код работал на все листья.
К сожалению листья так не думают. Где-то на середине страницы, все листья сместились и получилась такая каша.
Просмотрев на сколько пикселей они сместились при прокрутке, я решил просто вычесть и прибавить это число к изначальному позиционированию элементов
После того как я провел все эти математические вычисления, получилось так, если пользователь находится в начале страницы, листья в этой секции расположены кое-как, но по мере пролистывания страницы, они подбираются к тому состоянию, которое было обозначено в макете. Успокаиваем листочки
Ну вот и все, на главной странице задача выполнена, теперь осталось пробежаться по остальным страницам и подредактировать расположение листочков.
