Как реализовать эффект параллакса для разных разделов страницы?

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

Я создал немного упрощенный пример того, что я хочу сделать. Я хочу, чтобы спрайты (красные круги и зеленые квадраты) двигались вверх с другой скоростью, чем реальный фон. Однако примеры из a) и b) находятся в разных DIV, и у них неправильные границы, которые находятся в других div внутри того же контейнера. Как это:

<div id="section-1">
<div id="1-top"></div>
<div id="1-content"></div>
<div id="1-bottom"></div>
</div>

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

Будут ли квадраты в разделе b) перемещаться вверх к разделу a) или есть способ ограничить количество пикселей или процентных пунктов, на которые могут перемещаться объекты?

Пример


scroll html jquery parallax position
person Jesús Otero    schedule 16.05.2012    source источник
comment
Да, я видел это «прерывистое» движение при прокрутке с помощью мыши. Конечно, это также зависит от браузера. Opera имеет действительно плавную прокрутку даже с помощью мыши, что делает эффект намного более приятным (но остальные браузеры, которые я пробовал), так что спасибо за предложение. Я посмотрю на это. Этот плагин делает не совсем то, о чем я думал в начале, но я думаю, что он все равно будет выглядеть как действительно хороший эффект в том контексте, в котором я пытаюсь его использовать.   -  person Jesús Otero    schedule 17.05.2012

Ответы (2)


arrow_upward
2
arrow_downward

То, чего вы хотите достичь, вполне достижимо с помощью двух сценариев.

Помимо использования скрипта параллакса jQuery, вы должны использовать скрипт прокрутки jQuery для обработки ваших требований к красным кругам и зеленым квадратам.

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

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

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

Вот недавний САЙТ, показывающий последние плагины для начала работы. при поиске правильного скрипта прокрутки и параллакса.

person arttronics    schedule 17.05.2012

arrow_upward
2
arrow_downward

Кажется, что было много ответов, связанных с jquery parallax.

Я поиграл с этим на jsfiddle: http://jsfiddle.net/thinkingsites/88sqh/2/

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

Неровный фон не будет затронут анимацией дочерних элементов.

Глядя на боковую панель здесь, кажется, что есть много ответов для parallax jquery, хотя некоторые из них, кажется, основаны на примере nikebetterworld, что, я думаю, не то, что вы ищете.

person Thinking Sites    schedule 17.05.2012
comment
Да, большинство казалось не связанным с тем, что я собираюсь сделать. Nikebetterworld, похоже, стал катализатором множества вопросов по этому поводу. Спасибо за небольшой пример jsfiddle. Мне нужно будет протестировать это во время обеденного перерыва, так как это мой небольшой сторонний проект :) - person Jesús Otero; 17.05.2012