Анимация рулетки как сделать?

Question

[Сергей]

Добрый день, как проще всего сделать анимацию раскрытия/скрытия рулетки. Т.е. при скроллинге сайта вниз - нужно удлинять "линейку", а при скроллинге сайта вверх - "укорачивать".

Подскажите плиз механизм как это сделать и что для этого нужно?
Заранее спасибо!

Comments

[shmatuan]

js, на скролл повесить обработчик, высчитывать % прокрутки и показывать соответсвующий процент картинки
саму рулетку position: fixed к низу
без картинок/кода сложно что-то конкретнее)

[Сергей]

shmatuan, я просто думаю сделать много картинок с разной высотой вылета рулетки, и менять их по мере скролла. Думаю мб есть вариант по-проще...)

[shmatuan]

Сергей, В теории можно просто самую длинную картинку оставить видимой на всю страницу и сделать фиксированной саму рулетку - и тогда без js при скроле будет выглядеть как разматывание)

[Сергей]

@Сергей, хмм, прикольный вариант, попробую, спасибо!

[shmatuan]

Сергей, примерно так) https://codepen.io/andreysh/pen/gQjJgx

[Сергей]

shmatuan, мб напишите свой вариант как ответ, что-бы я выбрал, мб кому-то пригодится

Answer 1

[Никита Ермиличев]

1. Фон линейка
2. Корпус рулетки, который всегда прижат к врапперу
3. Сам враппер (который увеличивается в зависимости от скролла)
3.1 overflow: hidden (Типа до туда еще не докрутили)

Comments

[Сергей]

Спасибо, интересный вариант)

Answer 2

[shmatuan]

Если рулетка внизу страницы, то можно самую длинную картинку оставить видимой на всю страницу и сделать фиксированной саму рулетку - и тогда без js при скроле будет выглядеть как разматывание)
https://codepen.io/andreysh/pen/gQjJgx

Comments

[Сергей]

Спасибо ^_^