В этом учебном руководстве мы создадим аккордеон с изображениями, который разворачивает элементы по щелчку. При помощи одноуровневого элемента combinators и вложенной структуры мы можем управлять открытием элементов/слайдов с помощью переключателей.
Все изображения используемые в демо, принадлежат Andrey & Lili: L’aquarelle on Behance.
HTML разметка
Основная идея состоит в том, чтобы создать вложенную структуру, которая позволит нам просто перемещать соответствующие слайды аккордеона в одну сторону, т.е. перемещение одного основного переместит все свои внутренние слайды (вложенные элементы). У каждого изображения будет свой номер (переключатель), для того чтобы управлять «открытием» слайдов и заголовков.
<div class="ia-container">
<figure>
<img src="/images/1.jpg" alt="image01" />
<input type="radio" name="radio-set" checked="checked" />
<figcaption><span>True Colors</span></figcaption>
<figure>
<img src="/images/2.jpg" alt="image02" />
<input type="radio" name="radio-set" />
<figcaption><span>Honest Light</span></figcaption>
<figure>
<!-- ... -->
<figure>
<!-- ... -->
<figure>
<!-- ... -->
<figure>
<!-- ... -->
<figure>
<!-- ... -->
<figure>
<!-- ... -->
</figure>
</figure>
</figure>
</figure>
</figure>
</figure>
</figure>
</figure>
</div>
CSS
Мы зададим слайдеру ширину и скроем его.
.ia-container {
width: 685px;
margin: 20px auto;
overflow: hidden;
box-shadow: 1px 1px 4px rgba(0,0,0,0.08);
border: 7px solid rgba(255,255,255,0.6);
}
Ширина вычисляется следующим образом:
( (Number of images - 1) * 50px ) + 335px
Где 50px — ширина видимой части изображения, и 335px ширина полного изображения. В нашем случае ((8 – 1) * 50px) + 335px = 350px + 335px = 68px.
У каждого из блоков будет левое значение в 50 пикселей (видимая часть). Это должно быть их позицией относительно к их родителю. Это сделает слайдер похожим на аккордеон. Ширина составляет 335 пикселей, точно так же, как у каждого изображения. У блока также будет переход для плавного перемещения:
.ia-container figure {
position: absolute;
top: 0;
left: 50px; /* width of visible piece */
width: 335px;
box-shadow: 0 0 0 1px rgba(255,255,255,0.6);
transition: all 0.3s ease-in-out;
}
Первый блок будет расположен слева, и мы установим !important, для использования запросов. Позиция будет установлена в "relative", чтобы задать слайдеру высоту:
.ia-container > figure {
position: relative;
left: 0 !important;
}
У изображения будет ширина 100% так, чтобы оно заполнило весь блок:
.ia-container img {
display: block;
width: 100%;
}
Каждая из кнопок будет покрывать видимую часть слайда. Мы устанавливаем непрозрачность на 0, так что мы их не видим. z-index должен быть высоким:
.ia-container input {
position: absolute;
top: 0;
left: 0;
width: 50px; /* just cover visible part */
height: 100%;
cursor: pointer;
border: 0;
padding: 0;
opacity: 0;
z-index: 100;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
На самом деле, мы установили ширину в 0px но из-за какого-то странного поведения в браузере Chrome мы по-прежнему нуждаемся в правой части. Мы также возьмем блоки и передвинем их влево с переходами:
.ia-container input:checked{
width: 5px;
left: auto;
right: 0px;
}
.ia-container input:checked ~ figure {
left: 335px;
transition: all 0.7s ease-in-out;
}
Предоставление двух длительных переходов, один в состоянии «по умолчанию», второй, когда мы проверяем input, даст нам эффект «перетасовки».
Надпись на рисунке будет с темным наложением и будет содержаться у каждого элемента, а так же позиционируем её в верхней части блока:
.ia-container figcaption {
width: 100%;
height: 100%;
background: rgba(87, 73, 81, 0.1);
position: absolute;
top: 0px;
transition: all 0.2s linear;
}
.ia-container figcaption span {
position: absolute;
top: 40%;
margin-top: -30px;
right: 20px;
left: 20px;
overflow: hidden;
text-align: center;
background: rgba(87, 73, 81, 0.3);
line-height: 20px;
font-size: 18px;
opacity: 0;
text-transform: uppercase;
letter-spacing: 4px;
font-weight: 700;
padding: 20px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
Когда слайд будет выделен, мы удалим наложение, установив непрозрачность RGBA в 0:
.ia-container input:checked + figcaption,
.ia-container input:checked:hover + figcaption{
background: rgba(87, 73, 81, 0);
}
Блок будет исчезать и перемещаться сверху, с задержкой (должен открыться первый слайд)
.ia-container input:checked + figcaption span {
transition: all 0.4s ease-in-out 0.5s;
opacity: 1;
top: 50%;
}
Последний слайд, справа, не имеет других слайдов, его задержка не должна быть высокой:
.ia-container #ia-selector-last:checked + figcaption span {
transition-delay: 0.3s;
}
Когда наведете курсор мыши на видимую часть замкнутого слайда, мы сделаем небольшой эффект при наведении курсора. Но так как radio input покрывает эту часть (он находится поверх всех других элементов):
.ia-container input:hover + figcaption {
background: rgba(87, 73, 81, 0.03);
}
Все последующие настройки проверят, что input должен получить низкий z-index, опять же, чтобы предотвратить нежелательные поведения в Chrome:
.ia-container input:checked ~ figure input{
z-index: 1;
}
И, наконец, мы добавим некоторые запросы средств массовой информации, чтобы сделать движок реагирующим:
@media screen and (max-width: 720px) {
.ia-container {
width: 540px;
}
.ia-container figure {
left: 40px;
width: 260px;
}
.ia-container input {
width: 40px;
}
.ia-container input:checked ~ figure {
left: 260px;
}
.ia-container figcaption span {
font-size: 16px;
}
}
@media screen and (max-width: 520px) {
.ia-container {
width: 320px;
}
.ia-container figure {
left: 20px;
width: 180px;
}
.ia-container input {
width: 20px;
}
.ia-container input:checked ~ figure {
left: 180px;
}
.ia-container figcaption span {
font-size: 12px;
letter-spacing: 2px;
padding: 10px;
margin-top: -20px;
}
}
Автор: Lecaw
