parallax

Слайдер с эффектом параллакса на jQuery

Добрый день. Сегодня мы покажем вам небольшое руководство по созданию слайдера с эффектом параллакса на jQuery.

Какой толк от параллакса? Этот эффект добавит слайдеру «глубину» восприятия.


Пример Скачать

Разметка

HTML разметка начинается с основного контейнера с классом pxs_container. Кроме того, мы добавим оболочку для трех различных бэкграундов, чтобы создать эффект параллакса. Изображения для фона полупрозрачны — иначе эффект не получится.

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

Теперь разберемся со стилями.

CSS

Начнем с основного контейнера. Поскольку мы будем использовать всю ширину страницы для слайдера, поставим ширину основного контейнера на 100%. Установим его позиционирование на relative, потому как всего элементы внутри него будут с позициями absolute:

Оболочка для контейнеров с параллакс-изображениями будет содержать повторяемое фоновое изображение. Это изображение — простой градиент:

У элементов DIV внутри оболочки следующие свойства:

Ширина будет устанавливаться динамически, с помощью JavaScript. Теперь назначим для каждого контейнера свое фоновое изображение:

Также отметим, что и свойство left, также будет изменятся динамически. Вернемся к нему позже.

В начале оболочка невидима:

Она содержит все элементы, которые мы хотим загрузить. После того, как загрузка будет полностью проведена, мы покажем эту оболочку со всеми ее элементами.

Сбрасываем стили для списков:

Основная идея слайдера состоит в том, что мы сделаем действительно длинный список всех элементов li с шириной всего окна. И так, вы видите на экране слайдер — на самом деле это один элемент li. Мы установим ширину элемента ul динамически, исходя из совокупной ширины всех li элементов. Установка свойства float:left для всех li, даст нам гарантию, что все li элементы будут идти друг за другом:

Изображение в элементе li оцентировано горизонтально с помощью свойства margin на auto слева и справа:

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

Список превьюшек также спозиционирован абсолютно. Мы установим свойство left на 50%, потому что хотим, чтобы этот список был всегда в центре окна. Свойства width и отрицательный left margin будут расчитываться с помощью JavaScript:

Добавим белый бордюр и тень вокруг превьюшек:

Активная превьюшка будет полностью видимой:

Стили для навигации следующие:

Добавим изображение стрелки для каждого элемента навигации span:

Установка значений для left (pxs_prev) и right (pxs_next) будет автоматической, в расчете от ширины изображения.

И в конце добавим стили для элемента загрузки:

Со стилями закончили, приступаем к jQuery!

JavaScript

Основная идея слайдера в том, чтобы при анимации прокрутки изображений менялся и фон слайдера в соответствии эффекту параллакса. Например, когда мы нажимаем на прокрутку, чтобы увидеть следующее изображение, мы меняем(анимируем) значение свойства left для элемента ul на ширину li элемента. Также анимируем фоновые изображения, причем самое ближнее сдвинется на половину ширины экрана, чуть подальше на четверть, а еще дальше на одну восьмую. Это основной принцип параллакс эффекта.

Начнем с опций и кэширования.

Добавим следующий скрипт для инициализации нашего слайдера:

У слайдера есть следующие настраиваемые опции:

  • auto: Время в секундах между прокрутками. Если установить на 0, тогда автопроигрывание отключится.
  • speed: Скорость анимации между слайдами.
  • easing: Эффект затухания для анимации прокрутки.
  • easingBg: Эффект затухания для анимации фонов.
  • circular: Цикличность.
  • thumbRotation: Случайный поворот превьюшек.

Вот и все! Надеемся, что руководство было для вас полезным!

Пример Скачать


5 комментариев на “Слайдер с эффектом параллакса на jQuery

  1. Спасибо огромное! Очень пришлась по душе данная фотогалерея, особенно из-за отсутствия «php» и «flash». Я лишь дружу с HTML и CSS — в результате чего данная галерея удобно внедряется в сайт либо переделывается в сайт. Вопрос: данная галерея бесплатная или нет?

    Thumb up 0 Thumb down 0

Оставить комментарий