Эффект параллакса стал весьма интересовать веб-разработчиков, своей оригинальностью и заинтересованностью пользователей, в данном уроке мы рассмотрим как создать весьма привлекательный слайдер для сайта с помощью 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
// Время показа слайда
});
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.