Как сделать параллакс-прокрутку на несколько столбцов

Question

Я хочу сделать эффект параллакса для нескольких столбцов, содержащих фотографии.

Я испробовал множество идей, но не нашел решения, чтобы сделать что-то подобное http://weareeli.dk/ с нуля.

Не могли бы вы помочь мне с некоторыми идеями?

Спасибо!

Answer 1

Во-первых, это не прокрутка парралакса.Это будет означать, что вещи будут прокручиваться на разных скоростях, создавая впечатление, что вы находитесь дальше от глаз.

То, что мы имеем здесь (я думаю), еще проще.

• Каждый столбец отделен друг от друга
• Целое overflow hidden
• В каждом столбце два EventListeners
  1. Первыйпрослушиватель перетаскивания на темно-серой полосе с заголовком
  2. Второй - слушатель прокрутки на самом столбце
• Всякий раз, когда перехватывается событие первых двух,это вызванное действие контроллера, которое будет вычислять процентное значение от 0% до 100% (или от 0 до 1)
• . Этот контроллер отправит в представление сообщение с этим вычисленным процентным значением
• Представление будет вызывать функции (это можно сделать с помощью jQuery), которые будут прокручивать столбец и перемещать серую полосу вверх или вниз.

Это должно быть все.