Слайд-шоу со скользящими панелями, которые открывают новые фиксированные фоновые изображения.
Сегодняшний пример - это простой, отзывчивый слайдер с четким дизайном и интересным эффектом движения: с каждым новым слайдовым элементом вставной блок контента покрывает предыдущее и представляет новое изображение.
Создание структуры
Структура HTML состоит из двух основных элементов: ul.cd-slider для слайдов и навигации ol.cd-slider-navigation Оба обернуты внутри div.cd-slider-wrapper.
<div class="cd-slider-wrapper">
<ul class="cd-slider">
<li class="is-visible">
<div class="cd-half-block image"></div>
<div class="cd-half-block content">
<div>
<h2>Slide Number 1</h2>
<p>
<!-- content here -->
</p>
</div>
</div>
</li> <!-- .cd-half-block.content -->
<li>
<!-- item content here -->
</li>
<!-- addition list items here -->
</ul> <!-- .cd-slider -->
<!-- The ol.cd-slider-navigation element is created using jQuery and inserted here-->
</div> <!-- .cd-slider-wrapper -->Обратите внимание!
Элемент ol.cd-slider-navigation не вставляется непосредственно в HTML, но создается с помощью jQuery.
Добавление стиля
На небольших устройствах (ширина видового экрана меньше 900 пикселей) структура слайдера довольно проста: элемент .cd-slider имеет относительное положение, а его дочерние элементы <li> имеют абсолютное положение, верх и слева от нуля.
Все элементы списка переведены вправо, вне области просмотра translateX (100%); Класс .is-visible добавляется к видимому, чтобы переместить его обратно в окно просмотра translateX (0).
.cd-slider {
position: relative;
height: 100%;
overflow: hidden;
}
.cd-slider li {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform: translateX(100%);
transition: transform 0.6s;
}
.cd-slider li.is-visible {
transform: translateX(0);
}На больших устройствах элементы списка перемещаются обратно в окне просмотра (translateX (0)), а их два дочерних элемента .cd-half-block.content и .cd-half-block.image переводятся вправо TranslateX (200%) и translateX (100%) соответственно). Таким образом, оба элемента находятся за пределами области просмотра, перекрываясь.
Когда класс .is-visible добавлен в выбранный элемент списка, два элемента .cd-half-block перемещаются обратно в окно просмотра (translateX (0)).
Мы использовали переходы CSS3 для анимации обоих элементов: для .cd-half-block.content мы устанавливаем продолжительность перехода 0,6 с и задержку перехода 0 с, а для .cd-half-block.image - устанавливаем Длительность перехода 0s и задержка перехода 0,3 с.
Таким образом, когда .cd-half-block.content перевел половину общего значения перевода (100%), .cd-half-block.image перемещается обратно внутри окна просмотра (translateX (0)) мгновенно (переход - duration: 0s). Это создает эффект раскрытия изображения.
Вот быстрая анимация, которая объясняет логику анимации блоков (.gif, созданная с помощью After Effects):
@media only screen and (min-width: 900px) {
.cd-slider li {
transform: translateX(0);
}
.cd-slider .cd-half-block {
height: 100%;
width: 50%;
float: right;
}
.cd-slider .cd-half-block.content {
transform: translateX(200%);
transition: transform 0.6s 0s ease-in-out;
}
.cd-slider .cd-half-block.image {
transform: translateX(100%);
transition: transform 0s 0.3s;
}
.cd-slider li.is-visible .cd-half-block.content,
.cd-slider li.is-visible .cd-half-block.image {
transform: translateX(0%);
}
.cd-slider li.is-visible .cd-half-block.content {
transition: transform 0.6s 0s ease-in-out;
}
}Одно замечание:
Мы установили задержку перехода .cd-half-block.image равной половине длительности перехода .cd-half-block.content. Это связано с тем, что мы использовали простоту в качестве функции времени, что гарантирует, что после половины длительности перехода (в нашем случае .3s) .cd-half-block.content фактически переместил половину общего значения перевода.
Обработка событий
Мы использовали jQuery для создания и вставки в DOM навигации ползунка.
var sliderPagination = createSliderPagination(sliderContainer); // sliderContainer = $('.cd-slider-wrapper')
function createSliderPagination(container){
var wrapper = $('');
container.children('.cd-slider').find('li').each(function(index){
var dotWrapper = (index == 0) ? $('') : $(''),
dot = $('').appendTo(dotWrapper);
dotWrapper.appendTo(wrapper);
var dotText = ( index+1 < 10 ) ? '0'+ (index+1) : index+1;
dot.text(dotText);
});
wrapper.appendTo(container);
return wrapper.children('li');
}
