Эффект параллакса полного раздела Skrollr

Я изо всех сил пытаюсь добиться эффекта параллакса полного сечения. Я хочу в основном подражать http://rachelplatten.com/#intro.

Этот веб-сайт работает на мобильных устройствах (iOS) также довольно гладко. Я пытаюсь использовать Skrollr для достижения эффекта. На этом веб-сайте при прокрутке открывается следующий элемент div.

В моем codepen синий цвет перекрывает фотографию, а не открывает ее. Я также безуспешно пытался использовать цели привязки данных. Возможно, мой css неверен. Я планирую иметь неизвестное количество разделов, поэтому, если я смогу настроить базовую структуру, где бы это работало, было бы здорово. Я новичок в скроллре и надеюсь на любой совет.

<section data-center="transform:translate3d(0px, 0px, 0px);" data-top-bottom="transform:translate3d(0px, 500px, 0px);">

Спасибо


parallax skrollr
person James    schedule 21.05.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

Насколько я понимаю (если вы планируете сделать сайт удобным для мобильных устройств), вы предварительно загружаете все изображения, которые будете использовать в качестве фона, а затем используете их для заполнения .gap div.

person Dluks    schedule 28.05.2015