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

 

Для начала нам надо создать HTML разметку для нашей галереи, она будет состоять  из основного контейнера с классом “pxs_container”. Также мы добавим контейнер для трех различных изображений фона, которые будут смещаться на разные расстояния для создания эффекта параллакса. Фоновые изображения имеют области прозрачности, так что мы будем видеть их движение при наложении.

Следующим этапом будет создания непосредственного самого стиля CSS для галереи, в нем Вы можете определить размеры галереи, ее заливку, задать позиционирование на странице и тому подобное.

Далее добавляем фоновое изображение, которое является простым градиентом, и способствует читаемости во всех браузерах:

Далее определяем стиль внутри контейнеров div:

Теперь нам нужно скрыть следующий контейнер до перемещения:

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

Нужно сбросить стили для обоих списков:

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

Определяем позиционирование изображения:

Добавляем прозрачность и применяем эффект стекла для галереи:

Далее мы создаем рамку для наших миниатюр и применяем к ним эффект swadow:

Не активная миниатюра должна оставаться полупрозрачной:

Будем использовать стили навигации при помощи span:

Добавляем стрелки навигации:

Мы будем устанавливать значения для свойства left (pxs_prev) и свойства right (pxs_next) динамически для того, чтобы элементы навигации находились у левого и правого краев изображения.

И в завершении мы зададим стиль для индикатора загрузки, который будет центрироваться:

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

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

На этом наш урок закончен, надеюсь наш урок станет Вам полезен.

На главную