jParallax, Эфект сдвига слоёв
у jParallax была главная перестройка в готовности, которая будет выпущена как версия 1.0! Слои теперь можно замораживать – последняя особенность, которую разработчик хотел осуществить – и код стал более компактным. Остается только благодарить разработчиков и пользоваться!
Что делает jParallax?
jParallax превращает выбранный элемент в ‘window’, или viewport, а се его дочерние — в абсолютно помещенные слои, которые можно увидеть через через viewport. Эти слои перемещаются в ответ на действия мыши, и, в зависимости от их измерений (и вариантов инициализации слоя), они двигаются на разные расстояния, parallaxy способом.
Диаграмма иллюстрирует то, что Параллакс делает с html:
1 2 3 4 | <ul id="parallax"> <li></li> <li></li> </ul> |
Демонстрация с некоторыми изображениями тут.
Но это еще не все, что делает jParallax. Если слои сделаны из
Используя jParallax
Поведение по умолчанию jParallax состоит в том, чтобы показать всю ширину слоя в ответ на действие мыши, путешествуя по всей ширине окна параллакс. Когда мышь перемещена в левый край parallaxed окна, левая сторона слоя достигает его, а когда мышь перемещена в правый край parallaxed окна, правая сторона слоя достигает правой стороны окна.
Самый простой способ использовать jParallax состоит в том, чтобы сделать слои различных размеров, используя CSS. Большие слои перемещаются быстрее и таким образом кажутся ближе, и если слой меньше чем viewport, его края никогда не замечаются. Цветной Демонстрационный пример Капель был сделан точно этим способом, на jParallax в его состоянии по умолчанию, и ‘скоростью’ слоев, управляемых просто, делая изображения различные размеры. Никакие опции не применялись.
Хотите посложнее? Пожалуйста!
Реализация
jQuery(‘#parallax’).jparallax(options, layer_options);
Видно, что parallaxed элемент (ы) может быть выбран любым путем, что Вам понравится. Ради простоты в остальной части этого руководства я обращаюсь к parallaxed элементу как ‘#parallax’.
CSS
В большинстве случаев нужно установить следующий CSS на parallaxed элементе:
1 2 | #parallax {position:relative; overflow:hidden; width:npx; height:npx;} |
Дочерние записи parallaxed элемента становятся слоями, и автоматически даны
1 | position:absolute; |
чтобы запустить их перемещение, но сам parallaxed элемент нуждается в
1 | position:relative; |
или
1 | position:absolute; |
иначе уровни будут двигаться относительно документа, а не области просмотра.
1 | overflow:hidden; |
останавливает отображение слоев за пределами границ области просмотра, ширина и высота должны предотвращать свертывание области просмотра.
Кроме того, jParallax должен знать размеры слоев, и если есть прикрепленное информационное наполнение в уровне, который это должно знать, где и насколько большой это. Он использует методы jQuery
height(), width()
и
offset()
чтобы задать их. Однако если Вы испытываете трудности с диапазоном движения уровня, то установка всех параметров (высота, ширина, верх и левый край) через CSS упрощает использование этих методов.
Значения опций по умолчанию
Следующие опции можно передать jParallax, чтобы установить поведение мыши, заданное по умолчанию поведение уровней, настройки анимации и так далее:
mouseResponse: boolean true
mouseport: jQuery(‘element’) то же самое, что и parallaxed элемент
Позволяет ответ мыши и определяет элемент DOM, чтобы отследить мышь. По умолчанию он уже включен, и это — то же самое, что и viewport, элемент DOM, на котором Вы иллюстрировали примерами jParallax. Возможно, Вы хотели бы использовать целое окно как mouseport, когда можно считать его заодно с jQuery (окно).
mouseActiveOutside: boolean false
Позволяет ответ мыши вне пределов mouseport, но слои ведут себя, как будто мышь была на краю mouseport.
linkResponse: boolean true
Позволяет отвечать на «link» события, вызванные на parallaxed элементе (ах). Содержание, содержащее тег anchor и помещенное в слое, тянется к центру viewport, когда признак якоря “name” передают как первое значение во множестве через обычный «link». Рассмотрите следующий код:
jQuery(‘a’).click(function(){
var ref=jQuery(this).attr(«href»);
jQuery(‘#parallax’).trigger(«link», [ref]);
});
Это говорит, что, когда на якорь в документе кликают, его признак html передадут как ссылка к элементу ‘#parallax’ в спусковом механизме случая «link». Если будет содержание на одном из слоев, содержащих , то это потянут центру viewport. В противном случае ничего не случится.
Если связанное содержание не используется, то стоит
переключить linkResponse на false. Это даст браузеру маленькое пространство вверху для инициализации плагина. Этот выбор назвали «triggerResponse» до версии 0.9.9.
linkExposesEdges: boolean false
Задает, тянет ли linkResponse края слоев в viewport, пытаясь показать содержание в центре.
takeoverFactor: 0-1 0.68
takeoverThresh: 0-1 0.002
Устанавливает скорость и точность, с которой слои ‘нагоняют’ положение мыши, когда мышь входит в mouseport от где-нибудь другого, откуда это уезжает. Технически, takeoverFactor — распад кривой подхода за структуру мультипликации, где более низкие числа — больше распада (и поэтому более быстрый), и takeoverThresh — расстояние, в пределах которого положение слоя, как полагают, прибыло, как отношение mouseport измерения. takeoverThresh — по умолчанию одна пятисотая mouseport — большие числа могут произвести значимый ‘скачок’ в начале нового движения мыши. Вы не должны должны возиться с ними слишком много, я только всунул их там, потому что всем нам нравятся навороты.
frameDuration: миллисекунды 25
Можете увеличить для разгрузки ЦП. Приблизительно 40 являются приемлемыми (25 структур/секунд). Я люблю побыстрее. Я слышу, что у Google Chrome есть точность выбора времени до 1 миллисекунды! Другие не делают меньше чем 15 миллисекунд.
1 2 3 4 5 | xparallax: boolean true yparallax: boolean true xorigin: 'left' | 'centre', 'center', 'middle' | 'right' | 0-1 'centre' yorigin: 'top' | 'centre', 'center', 'middle' | 'bottom' | 0-1 'centre' Устанавливает положение слоев по умолчанию. Смотрите "Опции слоев" ниже для детального описан |
Разработайте jParallax через jQuery на экземпляре. Это может иметь смысл, когда Вы начинаете думать об изящном degredation. Я не рекомендую этому начаться с, все же.
Значение опций слоя по умолчанию
В дополнение к вариантам выше, эти опции можно передать к каждому слою индивидуально, как дополнительные аргументы:
jQuery(‘element’).jparallax(options, layer_0_options, layer_1_options, etc.);
Пример, как задать второму слою значение xtravel , но передать варианты не по умолчанию:
jQuery(‘element’).jparallax({}, {}, {xtravel: ’200px’});
У объекта опции слоя могут быть следующие параметры:
xparallax: boolean true
yparallax: boolean true
Позволяет движение в направлении x или y в ответ на мышь.
xtravel: 0-1 | ‘n %’ | ‘npx’ 1
ytravel: 0-1 | ‘n %’ | ‘npx’ 1
Когда определено как число между 0 и 1, или как последовательность процента, xtravel и ytravel измеряют расстояние, слой поедет. Когда определено как последовательность пиксела они устанавливают расстояние, слой поедет.
Когда travel имеет направление влево и равно по умолчанию 1, поведение состоит в том, чтобы показать целую ширину слоя по целому диапазону viewport в ответ на мышь, двигаясь по всей ширине mouseport. Другими словами, левые встречают левых, когда мышь слева, геометрические оси, когда мышь в центре, и право встречает право, когда мышь справа. Установка xtravel , скажем,
0.5,
или
’50%’
будет означать половину, что возможное горизонтальное путешествие слоя произойдет по тому же самому диапазону движения мыши.
Числа вне диапазона 0-1 также могут использоваться. Отрицательные вызовут путешествие в обратном направлении, измеряя факторы, больше чем
1
(или
’100%’),
или меньше чем
-1
(или
‘-100%’)
заставит края слоев потянуться в представление.
xorigin: ‘left’ | ‘centre’, ‘center’, ‘middle’ | ‘right’ | 0-1 ‘centre’
yorigin: ‘top’ | ‘centre’, ‘center’, ‘middle’ | ‘bottom’ | 0-1 ‘centre’
Имеет значение, только когда xtravel или ytravel не 1. Определяет, какой пункт слоя выстраивается в линию, с которым пунктом, viewport когда мышь в том пункте в mouseport. Понял?
Слушайте, если origin.x установлен в ‘левый’, то, когда мышь перемещена в левую сторону mouseport, левая сторона слоя достигает левой стороны viewport. Если это значение равно ‘centre’, то, когда мышь в центре mouseport, центр слоя союзник центра viewport. Также и в случае с ‘right’.
Числа могут также использоваться:
0 эквивалентно ‘left’.
0.5 эквивалентно, чтобы ‘centre’ или ‘center’ или ‘middle’.
1 эквивалентно, чтобы ‘right’.
Числа вне диапазона 0-1 также могут использоваться, хотя Вы начнете видеть края слоев, появляющихся в viewport. И они поедут в противоположном направлении.
width: integer undefined
height: integer undefined
Значения измерений слоя, хотя обычно они читаются из css, может быть отвергнуты. Это НЕ изменяет css, только идея jParallax того, насколько большой слой. Это может быть очень полезно в случаях, где Вы хотите быть в состоянии ‘щелкнуть через’ верхние слои. Типично Вы делаете слои очень маленькими в css, но говорите jParallax, что они являются большими через ширину и высоту. Возможно, вы хотите переполнения: видимости на тех слоях, также.
Подсказки
Дополнительная графика
Если Вы хотите добавить элементы к #parallax, такие как накладывание кривых угловых изображений как в вышеупомянутом примере, добавьте их после того, как Вы иллюстрировали примерами jParallax, чтобы избежать, включая те элементы в вычисления.
Статья переведена JaWaReZ
a
Нет комментариев на "jParallax, Эфект сдвига слоёв"
Нет комментариев.
Вы можете продолжить обсуждение этой статьи на форуме