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

Идея основывается на слайдере с главной страницы 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