jQuery: плагин Scrolling Parallax

parallaxScrolling Parallax это jQuery плагин, который добавляет эффект параллакса при прокрутке страницы с помощью скролбара или колеса мыши. Это позволяет фону страницы прокручиваться с другой скоростью нежели остальной контент страницы. Эффект параллакса позволяет с легкостью создавать иллюзию глубины вашего сайта. Самый простой вариант использования плагина это просто указать плагину путь до изображения. Плагин возьмет данное изображение и растянет его на всю ширину страницы и на 150% высоты страницы. Дополнительные 50% послужат для плавной прокрутки фона вместе с основным контентом. У плагина масса опций, которые позволяют скролить быстрее, медленнее, зацикливать скрол и т.д. Но обо всем по-порядку.


Скачать плагинПосмотреть демо

Плагин Scrolling Parallax для фоновых изображений

Использовать Scrolling Parallax для фоновых изображений очень просто. Просто подключите файлы библиотеки jQuery и плагина. Остается только вызвать функцию с указанием пути до изображения в качестве параметра:

$.scrollingParallax('img/background-parallax.jpg');

Это приведет к тому, что изображение прикрепится к странице и масштабируется как было указано выше. Вы можете так же настроить некоторые параметры:

$.scrollingParallax('img/background-parallax.jpg', {
    bgWidth : '200%',
    enableHorizontal : true
});

Приведенный выше фрагмент кода растянет изображение в ширину на 200% от ширины экрана и добавит возможность горизонтального скрола наравне с вертикальным.

Плагин Scrolling Parallax для jQuery объектов

Для возможности работы не только с фоновым изображением плагин Scrolling Parallax может применяться к любому фрагменту разметки. Для этого используются jQuery селекторы:

$('div.parallax-div').scrollingParallax();

Код приведенный выше применит плагин ко всем блокам div, которые имеют класс parallax-div. Так же имеет смысл назначить этим блокам CSS свойство position:fixed.
Ну и так же как в первом случае мы можем добавить несколько параметров:

$('div.parallax-div').scrollingParallax({
    staticSpeed : 3,
    loopIt : true
});

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

Параметры плагина Scrolling Parallax для анимации

Плагин Scrolling Parallax работает прекрасно и со стандартными параметрами, но вы так же можете управлять его работой. Для задания параметров следует использовать вот такую конструкцию:

$.scrollingParallax('img/parallax-image.jpg', {
    тут параметры
});

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

staticSpeed : .2

Параметр staticSpeed установленный в значение .2 задаст скорость в 5 раз меньшую чем прокрутка страницы. Если вы хотите заставить параллакс скроллиться быстрее, чем основной контента, то установите этот параметр больше единицы. При использовании параметра staticSpeed вы сможете использовать еще несколько параметров.
По стандарту, при использовании staticSpeed создается параллакс, который конечен и при длительной прокрутке он просто остановиться. Чтобы снять это ограничение и зациклить скроллинг объекта следует использовать параметры:

staticScrollLimit : false,
loopIt : true

Есть еще несколько параметров. Параметр reverseDirection работает с обоими вариантами задания скорости, автоматическим и статическим и позволяет прокручивать объект в обратном направлении:

reverseDirection : true

Добавить возможность горизонтального скроллинга можно с помощью параметра enableHorizontal:

enableHorizontal : true

Для горизонтального скроллинга вы можете задать все те же параметры, что и для обычного. Разница будет лишь в добавлении «Х» в конце каждого параметра (ось-х):

enableHorizontal : true,
staticSpeedX : .5

Полный список параметров можно посмотреть тут

Варианты вставки плагина Scrolling Parallax в макет

Кроме параметров анимации в плагине Scrolling Parallax предусмотрена так же настройка вставки его в макет. В данном случае речь идет лишь о работе с фоновым изображением. По стандарту изображение растягивается на 150% в высоту и 100% в ширину экрана. Если разрешен горизонтальный скроллинг, то и ширина изображения будет увеличена до 150%. Но вы можете так же задать эти два параметра вручную:

bgWidth : '250%',
bgHeight : '50%'

Если же вы не хотите использовать растянутое изображение для фона, плагин Scrolling Parallax так же позволяет замостить фон вашим изображением в его исходных пропорциях. Просто установите параметр bgRepeat в значение true:

bgWidth : '250%',
bgHeight : '50%',
bgRepeat : true

Известные проблемы, баги и т.д.

Большая часть багов и ошибок, которые были выявлены при работе плагина на данный момент устранены. Но остались несколько нерешенных проблем. Одна из них — это неправильная или некорректная работа плагина в браузере IE6. Так же могут возникнуть проблемы при работе на старых компьютерах при быстрой прокрутке.

Скачать плагинПосмотреть демо

Требуется такси в Москве? Вы можете перейти по ссылки и заказать онлайн такси в Москве. Корпоративное такси, автомобили в аренду, такси в аэропорт и на вокзал, грузоперевозки — все это на сайте 2321111.ru



Запись опубликована в рубрике JavaScript, Parallax с метками , , , , . Добавьте в закладки постоянную ссылку.

4 комментария: jQuery: плагин Scrolling Parallax

  1. Albion говорит:

    Очень хотел бы себе такое, но у меня от него страница тормозит.

  2. Atamovich говорит:

    Прикольная штуковинка

  3. Neo Lanser говорит:

    Оч даже хороший плагин.

  4. Alex говорит:

    «при длительной прокрутке он просто остановиться» — «ь» тут лишний

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *