Как прокрутить все изображения в CSS

Question

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

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

Как сделать что-то подобное в Css & Javascript?

С уважением, Энди

Answer 1

Конечно, вы можете найти кучу рабочих кодов, но если вы хотите создать свой собственный, вы можете выполнить следующие шаги, чтобы начать.

1. Создание div с шириной и высотой 100% и position:absolute; top:0; left:0; transform:translateY(100%) .

2. Вашим дивам понадобятся некоторые флаги состояния, такие как активный, скрытый, следующий, пред. Создавайте анимации с помощью css или javascript, которые визуально анимируют div, но также изменяют и обрабатывают эти флаги.

   т.е. transform:translateY(0); чтобы показать div и transform:translateY(100%); чтобы снова скрыть div. (Эта анимация полностью зависит от вас)

3. Наконец, свяжите эту анимацию с событием прокрутки окна с помощью javascript. Если вы не хотите связать их с другими событиями, такими как нажатие клавиш, нажмите et c.

Answer 2

Теперь я понял, что вы хотите использовать в своем приложении. Вы хотите, чтобы прокрутить всю страницу с несколькими изображениями в фоновом режиме должны быть изменены при прокрутке. Это можно сделать, используя свойство background-image в CSS некоторые Javascript.

См. Эту демонстрацию - Изменить фоновое изображение при прокрутке . Используйте это, это будет работать как шарм.