Эффект параллакса при помощи CSS3 и jQuery

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

Идея основывается на слайдере с главной страницы Kendo UI, фрэймворке для современных HTML UI. После того как мы получили несколько вопросов о том, как сделать что-то подобное, мы решили воссоздать этот эффект.

Как это работает

Слайдер состоит из нескольких слайдов, каждый из них будет иметь заголовок h2, текст, ссылку и изображение:

<div id="da-slider" class="da-slider">
 
 <div class="da-slide">
 <h2>Some headline</h2>
 <p>Some description</p>
 <a href="#" class="da-link">Read more</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>

Мы будем анимировать каждый из этих элементов. Для этого мы будем управлять поведением элементов, присвоив нужный класс соответствующим слайдам. Например, если мы хотив чтобы текущий слайд сдвигался вправо, мы укажем ему класс "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; }
}

Настройки

Доступны следующие настройки при вызове плагина cslider:

$('#da-slider').cslider({
 
 current     : 0,
 // Индекс текущего слайда
 
 bgincrement : 50,
 //увеличиваем позицию фона (эффект параллакса) при скольжении
 
 autoplay    : false,
 // слайдшоу вкл/выкл
 
 interval    : 4000
 //время между переходами
 
});

Эффект параллакса создается путем перемещения фона слайдера в обратном направлении при скольжении. При помощи парамета bgincrement вы можете контролировать количество пикселей, на которое будет перемещение.

Демонстрация

Демо 1: Настройки по умолчанию
Демо 2: Слайд-шоу (с различной анимацией)

Обратите внимание, что этот эффект не будет работать в браузерах, не поддерживающих CSS анимацию и переходы.

Мы надеемся, что вам понравился наш небольшой эксперимент и он будет Вам полезен!

Скачать исходные файлы

Перевод статьи с tympanus.net/codrops


Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Комментарии  

+1 #1 Дмитрий 19.04.2012 16:15
Похоже на параллакс, но это не он ИМХО. У настоящего паралакса фон и объекты имеют сходную тематику, здесь же просто узоры.

You have no rights to post comments