Сегодня, 9 мая, я предлагаю почтить память погибших в Второй Мировой войне и сделать аккордеон с фронтовыми фотографиями, который будет раскрывать фото по нажатию на них кнопки мыши. Более того, поскольку фотографии тех лет больше ассоциируются с черно-белым форматом, то применим фильтр, преобразующий фото в градации серого, а цветными они будут только при открытии.
HTML код аккордеона
Наши фотографии вместе с описанием будут располагаться в теге figure, причем один тег figure
будет вложен в другой. В результате, перемещая один слайд, мы сдвинем и вложенные слайды. Просто, как все гениальное!
<form class="acordeon">
<figure>
<input type="radio" name="radio-set" checked="checked"/>
<img src="images/1.jpg">
<figcaption><span>Союзники</span></figcaption>
<figure>
<input type="radio" name="radio-set">
<img src="images/2.jpg" alt="">
<figcaption><span>Вести с фронта</span></figcaption>
<figure>
<input type="radio" name="radio-set">
<img src="images/3.jpg" alt="">
<figcaption><span>У границы</span></figcaption>
<figure>
<input type="radio" name="radio-set">
<img src="images/4.jpg" alt="">
<figcaption><span>Обед</span></figcaption>
<figure>
<input type="radio" name="radio-set">
<img src="images/5.jpg" alt="">
<figcaption><span>Радисты</span></figcaption>
<figure>
<input type="radio" name="radio-set">
<img src="images/6.jpg" alt="">
<figcaption><span>Обезвреживание мины</span></figcaption>
<figure>
<input type="radio" name="radio-set">
<img src="images/7.jpg" alt="">
<figcaption><span>Ас из Асов</span></figcaption>
<figure>
<input class="last" type="radio" name="radio-set">
<img src="images/8.jpg" alt="">
<figcaption><span>Парад победы</span></figcaption>
</figure>
</figure>
</figure>
</figure>
</figure>
</figure>
</figure>
</figure>
</form>
CSS
Ограничиваем наш аккордеон по ширине и прячем все, что вылезает наружу, присвоив CSS свойтсву overflow значение hidden
. Какова же будет наша ширина? Хмммм... У нас 8 изображений с шириной 335px, но у всех, кроме активного, будет видно только 50px по ширине. Значит ширина аккордеона 7*50+1*335=685px
.acordeon {
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);
}
Видимую часть наших фотографий (о ней мы только что говорили) зададим с помощью для свойства left 50 px (видимая часть). Для плавного раздвигания фото, воспользуемся CSS свойством transition. Обратите внимание, на сегодняшний день многие браузеры поддерживают его только через соответствующие префиксы.
.acordeon figure {
position: absolute;
top: 0;
left: 50px; /* ширина видимой части */
width: 335px;
box-shadow: 0 0 0 1px rgba(255,255,255,0.6);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
Первое изображение целиком пристыковано к левому краю, поэтому для него смещение с помощью свойства left
не нужно. В дальнейшем, мы будем использовать медиа-запросы для адаптации нашего слайдера под разные разрешения экранов. Чтобы не обнулять это значение для первой фотографии еще и там, воспользуемся директивой !important. Чтобы задать слайду высоту, position установим в relative
:
.acordeon > figure {
position: relative;
left: 0 !important;
}
Фотографии имеет ширину 100% для заполнения всего доступного пространства, а еще мы применили к ним filter чтобы сделать их черно-белыми:
.acordeon img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
filter: url("desaturate.svg#greyscale");
filter: gray;
display: block;
width: 100%;
}
Каждая кнопка нашего переключателя зарывает все видимое пространство аккордеона. Задав padding равным нулю мы спрятали кнопки, сохранив при этом функционал. Чтобы наши кнопки лежали поверх фотографий, сделаем z-index достаточно большим:
.acordeon input {
position: absolute;
top: 0;
left: 0;
width: 50px; /* просто покрываем видимую часть */
height: 100%;
cursor: pointer;
border: 0;
padding: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
z-index: 100;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
На самом деле, мы установили ширину в 0, но из-за странного поведения в браузере Chrome мы по-прежнему нуждаемся в правой части. Мы также возьмем блоки и передвинем их при помощи переходов:
.acordeon input:checked {
width: 5px;
left: auto;
right: 0px;
}
.acordeon input:checked ~ figure {
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
left: 335px;
}
Два времени длительности перехода (первое для состояния по умолчанию, а второе для отмеченного состояния) позволит нам получить “перетасовки”. Изменяя эти значения, можно добиться разных эффектов эффектов.
.acordeon figcaption {
width: 100%;
height: 100%;
background: rgba(87, 73, 81, 0.1);
position: absolute;
top: 0px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
Заголовок выровняем по центру, зададим отступы справа и слева в 20px, а все буквы переведем в верхний регистр с помощью CSS свойства text-transform. Свойство top позволяет спозиционироать его в первой половине фотографии, а свойство opacity
спрятать от любопытных глаз:
.acordeon figcaption span {
position: absolute;
top: 40%;
right: 20px;
left: 20px;
overflow: hidden;
text-align: center;
background: rgba(0, 0, 0, 0.3);
line-height: 20px;
font-size: 18px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
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:
.acordeon input:checked + figcaption,
.acordeon input:checked:hover + figcaption{
background: rgba(87, 73, 81, 0);
}
Заголовок фотографии в теге span
будет проявляться и выскальзывать сверху с задержкой, т.к. сперва должна показаться активная фотография:
.acordeon input:checked ~ figcaption span {
-webkit-transition: all 0.4s ease-in-out 0.5s;
-moz-transition: all 0.4s ease-in-out 0.5s;
-o-transition: all 0.4s ease-in-out 0.5s;
-ms-transition: all 0.4s ease-in-out 0.5s;
transition: all 0.4s ease-in-out 0.5s;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
filter: alpha(opacity=99);
opacity: 1;
top: 80%;
}
Так как крайняя правая фотография последняя, то длительная задержка не нужна:
.acordeon .last:checked + figcaption span {
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;
}
Создадим эффект выделения, когда курсор мыши наводится на видимую часть закрытого слайда, увеличивая значение непрозрачности в rgba:
.acordeon input:hover ~ figcaption {
background: rgba(87, 73, 81, 0.03);
}
Chrome опять чудит, поэтому все следующие соседи активного переключателя должны иметь маленьктий z-index
:
.acordeon input:checked ~ figure input{
z-index: 1;
}
Вот и все. Осталось только добавить медиа запросы, чтобы наш аккордеон умещался на маленьких экранах:
@media screen and (max-width: 720px) {
.acordeon {
width: 540px;
}
.acordeon figure {
left: 40px;
width: 260px;
}
.acordeon input {
width: 40px;
}
.acordeon input:checked ~ figure {
left: 260px;
}
.acordeon figcaption span {
font-size: 16px;
}
}
@media screen and (max-width: 520px) {
.acordeon {
width: 320px;
}
.acordeon figure {
left: 20px;
width: 180px;
}
.acordeon input {
width: 20px;
}
.acordeon input:checked ~ figure {
left: 180px;
}
.acordeon figcaption span {
font-size: 12px;
letter-spacing: 2px;
padding: 10px;
margin-top: -20px;
}
}