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

jQuery 27.04.2013

Эффект параллакса стал весьма интересовать веб-разработчиков, своей оригинальностью и заинтересованностью пользователей, в данном уроке мы рассмотрим как создать весьма привлекательный слайдер для сайта с помощью CSS3 и jQuery. С помощью анимаций CSS мы можем контролировать каждый элемент на слайде и создавать поразительные эффекты за счет их взаимного смещения. Слайдер будет содержать несколько слайдов, которые будут смещаться, создавая интересный эффект. В демонстрации будет использоваться автоматическая и ручная прокрутка..

ДЕМО

ИСХОДНИКИ

Как всегда, мы начнем с разметки HTML, в каждом слайде размещается элемент h2, абзац и элемент div с изображением:

<div id="da-slider" class="da-slider">

 <div class="da-slide">
 <h2>Заголвок</h2>
 <p>Описание</p>
 <a href="#" class="da-link">Прочитать все</a>
 <div class="da-img">
 <img src="images/1.png" alt="image01" />
 </div>
 </div>

 <div class="da-slide">
 <!-- ... -->
 </div>

 <!-- ... -->

 <nav class="da-arrows">
 <span class="da-arrows-prev"></span>
 <span class="da-arrows-next"></span>
 </nav>

</div>

Ядром слайдера являются анимации каждого элемента. Контролировать повдение элементов можно с помощью классов направлений, устанавливаемых для слайда.

Например, когда слайд смещается вправо, он получить (с помощью JavaScript кода) класс “da-slide-toright”. Есть четыре возможных класса направлений.

.da-slide-fromright - при движении справа
.da-slide-fromleft - при движении слева
.da-slide-toright - при движении направо
.da-slide-toleft - при движении налево

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

/* Выскальзывание слайда справа */
.da-slide-fromright h2{
    animation: fromRightAnim1 0.6s ease-in 0.8s both;
}
.da-slide-fromright p{
    animation: fromRightAnim2 0.6s ease-in 0.8s both;
}
.da-slide-fromright .da-link{
    animation: fromRightAnim3 0.4s ease-in 1.2s both;
}
.da-slide-fromright .da-img{
    animation: fromRightAnim4 0.6s ease-in 0.8s both;
}

/* Параметры анимаций для разных элементов: */
@keyframes fromRightAnim1{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim2{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim3{
    0%{ left: 110%; opacity: 0; }
    1%{ left: 10%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim4{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 60%; opacity: 1; }
}

Рассмотрим некоторые опции плагина jQuery. Эффект параллакса создается смещением фона в направлении обратном движению слайда. Параметр bgincrement позволяет управлять эффектом.

$('#da-slider').cslider({

    current     : 0,
    // Индекс текущего слайда

    bgincrement : 50,
    // Увеличение положения фона
    // (эффект параллакса) при скольжении слайда

    autoplay    : false,
    // Включение/выключение слайдшоу

    interval    : 4000
    // Время показа слайда

});

Материал взят из зарубежного источника - tympanus.net/Development/ParallaxContentSlider/index.html и представлен исключительно в ознакомительных целях.