Параллаксная прокрутка только через навигацию

Поскольку я все еще новичок в Javascript/Jquery/HTML5/CSS3, я решил задать вопрос всем вам, гораздо более опытным программистам.

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

Макет сайта будет таким:

 O
OXO
 O

«О» — это разделы контента, «Х» — «домашняя» страница (точка происхождения). Если пользователь щелкнет стрелку в верхней части экрана (от исходной точки), страница прокрутится вверх. То же самое касается любого другого направления. Мне нужна одна гигантская фотография заведения на заднем плане, которая меняет свое положение в зависимости от конкретного элемента контента, к которому они «прокручиваются», используя эффект параллакса.

Два дня ломал голову, пытаясь понять, с чего начать. Любая помощь будет принята с благодарностью, и, пожалуйста, дайте мне знать, если мне нужно быть более конкретным в чем-то. Благодарю вас!


javascript html css parallax jquery-ui
person Spartacus    schedule 12.07.2012    source источник
comment
Рассматривали ли вы различные плагины параллакса на основе JavaScript или jQuery которые там? Я бы начал с движка параллакса, который соответствует вашим потребностям. Stellar.js, например, допускает горизонтальные эффекты параллакса.   -  person arttronics    schedule 12.07.2012
comment
Спасибо за ваш ответ. Да, я просмотрел множество плагинов параллакса, поскольку я более или менее хочу сделать это в Jquery, поскольку другие части моего контента будут использовать Jquery. Эти плагины не совсем делают то, что мне нужно, или я понятия не имею, как их реализовать, чтобы делать то, что мне нужно.   -  person Spartacus    schedule 12.07.2012

Ответы (1)


arrow_upward
3
arrow_downward

Контент домашней страницы находится в середине параллакса.

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

Примите во внимание: плагин прокрутки параллакса для jQuery

Приведенная выше демонстрационная страница параллакса позволяет вам прокручивать в обоих направлениях.

Вот метод/подход, который я бы использовал, используя этот плагин.

1. Разработайте свой веб-сайт с горизонтальным и вертикальным содержанием по мере необходимости. Пример макета:

OOO     Here, the top of the webpage is content about the "starting" point.
OXO     Next, you have content on the sides of the "starting" point as shown.
OOO     Finally, content is below the "starting" point to complete the webpage.

2. Поскольку посетитель веб-страницы увидит нежелательную верхнюю часть веб-страницы, используйте jQuery.scrollTo() Plugin, чтобы установить «начальную» точку при загрузке страницы.

3. Используйте подключаемый модуль или метод, который позволит использовать 4 прозрачных стрелок "div", которые находятся на каждой стороне области просмотра в "фиксированном" положении. При нажатии (или наведении курсора) мышью это будет имитировать движение полосы прокрутки, и подключаемый модуль веб-страницы параллакса будет реагировать соответствующим образом. Пример макета (обратите внимание, что внешняя навигация полупрозрачна):

UUUUU     Webpage top-content is here plus the overlay arrow for UP Navigation.
LOOOR     LEFT and RIGHT Navigation arrows are seen on top of more "top" content.
LOXOR     The center starting point will show the "fixed" Navigation arrows.
LOOOR     LEFT and RIGHT Navigation arrows are seen below the "starting" point.
DDDDD     Bottom-content is here plus the overlay arrow for DOWN Navigation.

Самая сложная часть веб-страницы — это наличие достаточного «контента-наполнителя», который занимает верхнюю и боковые стороны «начальной» точки. Но если этот «наполнитель-контент» представляет собой галерею миниатюр, то эта конкретная страница параллакса будет выглядеть очень красиво (и необычно!).

person arttronics    schedule 12.07.2012
comment
Фантастический! Вы зажгли мой мозг, и теперь я думаю, что знаю, с чего начать. Подвопрос: как мне связать любой подключаемый модуль параллакса, который я использую, с событием onClick вместо события прокрутки? Придется ли мне копаться во всем коде библиотеки и заменять события прокрутки? - person Spartacus; 13.07.2012
comment
Давайте сделаем шаг назад и не будем рассматривать .scrollTo() как выбор. Буквы O вместе с начальной точкой X должны быть отдельными веб-страницами, а не контейнерами div. Это очень важно, чтобы начальная точка X занимала область просмотра браузера независимо от размера окна браузера. Только при нажатии на стрелку навигации (вверх, вниз, влево или вправо) новая страница (также известная как страница содержимого O) прокручивается в поле зрения. Поскольку каждая веб-страница создается методом параллакса, все анимации происходят автоматически. Сценарий прокрутки в этом случае — jQuery Ascensor - person arttronics; 13.07.2012
comment
На самом деле это намного лучше... Тем более, что я хочу отключить прокрутку пользователя (колесиком мыши, полосой прокрутки и/или трекпадом) и привязать движение прокрутки только к кнопкам навигации. - person Spartacus; 13.07.2012
comment
Эй, арттроник! Подключаемый модуль jQuery Ascensor использует div и scrollTo()... Как бы я сделал другой метод загрузки отдельных веб-страниц? - person Spartacus; 16.07.2012
comment
Настройте каждый div для использования полного iframe. Помните, что iframes следуют правилам политики единого происхождения для доменов, а некоторые веб-сайты... даже www.google.com не позволяют использовать iframe. Ссылка на jsFiddle - person arttronics; 17.07.2012